phone component forthSection made

src/Components/mobileMockup/mobileMockup.css

@@ -76,9 +76,11 @@
 }
 .mobileMockup .thirdsection{
     display: flex;
-justify-content: center;
-align-items: center;
-width:90%;
+    justify-content: center;
+    align-items: center;
+    width:90%;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(238,238,238,0.7);
 }
 .mobileMockup .thirdsection div{
     display: flex;
@@ -104,3 +106,33 @@ width:90%;
     margin:0px;
     color:gray;
 }
+
+.mobileMockup .forthSection{
+    margin-top: 15px;
+    display: flex;
+    width:90%;
+}
+.mobileMockup .forthSection .messageBox{
+    color:#484848;
+    padding: 5px;
+    font-size: 0.67em;
+    background: white;
+    margin:15px;
+    margin-bottom: 3px;
+    border-radius:7px ;
+    box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
+}
+.mobileMockup .forthSection img{
+    width: 50px;
+    height: 50px;
+    background: rgba(0,0,0,0.1);
+    border-radius: 15px;
+    margin-left:5px;
+}
+.mobileMockup .forthSection .messageTime{
+    font-size: 0.6em;
+    float: left;
+    margin-left: 5%;
+    margin-top: 0px;
+    color:rgba(0,0,0,0.3);
+}

src/Components/mobileMockup/mobileMockup.js

@@ -66,6 +66,21 @@ const MobileMockup = () => {
                     <p>بابانوئل</p>
                 </div>
             </div>
+
+            <div className='forthSection'>
+
+                <img src={tahmoores} />
+                <div>
+                <div className='messageBox'>
+                    <p>
+                    سلام به روباتیو خوش اومدی 
+من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمی‌خواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
+                    </p>
+                    
+                </div>
+                <p  className='messageTime'>12:30</p>
+                </div>
+            </div>
         </div>
     );
 };