List page

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -31,7 +31,13 @@ export default function ActiveJobMessage({ activeJobMesList }) {
         <tbody>
             {currentActiveJobMesList.map((item, index) => (
             <tr key={index} className='text-slate-500'>
-                <td className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></td>
+                <td>
+                    <div className="msg_box">
+                        <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                        <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                    </div>
+
+                </td>
             </tr>
             ))}
         </tbody>

src/index.css

@@ -9,6 +9,17 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
+.msg_box{
+  background-color: aliceblue;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 15px;
+}
+.msg_header{
+  background-color: #1a3544;
+  color: white;
+  font-weight: bold;
+}
 .siderCardHeader{
   margin: 40px 40px 10px 40px;
   font-size: 24px;