<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<div id="Chatbox">
  <div class="box1"> <i class="fas fa-chevron-left" style="color: white; float:left; margin-right: 10px;"></i>  AOMG갱(4)
    <span>
      <i class="fas fa-bars" style="color: white; float:right; margin-left: 10px;"></i>
      <i class="fas fa-phone-alt" style="color: white; float:right; margin-right: 10px;"></i>
      <i class="fas fa-video" style="color: white; float:right; margin-right: 20px;"></i>
    </span>
  </div>
  
   <div class="box2">
      <p class="date"> 27 Jan 2021 </p>
     
    
     <p><i class="fas fa-user-circle" style="  color: #ba5a45; font-size: 42px; float: right;"></i> 
     <span class="time-right"> 9.23 AM</span> </p>
     <br>
     <p class="text-right"> Hii </p>
     <br><br>
     
     <p><i class="fas fa-user-circle" style="  color: #ffbf45; font-size: 42px;"></i> 
     <span class="time-left"> 9.23 AM</span> </p>
     <p class="text-left"> 안녕~ ㅋㅋ </p>
  
     
     <p><i class="fas fa-user-circle" style="  color: #478077; font-size: 42px;"></i> 
     <span class="time-left"> 9.25 AM</span> 
       <p class="text-left"> Wassup!, Where are you? </p>
    </p>
     
     <p><i class="fas fa-user-circle" style="  color:#64a4bf; font-size: 42px;"></i> 
     <span class="time-left"> 9.30 AM</span>
       <p class="text-left"> I'm here </p>
       <p class="text-left"> <a href="https://goo.gl/maps/QXvv9yK8dy3iheoH8">&#x1F6A9	300 Olympic-ro, Jamsil 6(yuk)-dong, Songpa-gu, Seoul, South Korea</a> </p>
       <p class="text-left">see ya~ ~ </p>
     </p>
       
     
     <p><i class="fas fa-user-circle" style="  color: #ba5a45; font-size: 42px; float: right;"></i> 
     <span class="time-right"> 9.30 AM</span></p>
     <br>
     <p class="text-right"> okayy bro! &#x1F919 </p>
   </div>
  
<div class="box3">
  
 <form>
  <i class="fas fa-plus" style="color: #fabe2c;"></i>
  <i class="far fa-images" style="color: #fabe2c;"></i>
   <i class="fas fa-camera" style="color: #fabe2c;"></i>
   <i class="far fa-smile"  style="color: #fabe2c;"></i>
  <label for="message"></label>
  <input type="text" id="message" name="message" placeholder="Enter message...">
  <button>
    <i class="fas fa-paper-plane" style="  color: #fabe2c; font-size: 20px; margin-right: 10px;"></i>
  </button>
</form>
</div>
#Chatbox {
  display: flex;
 flex-direction: column;
justify-content: center;
}

.box1 {
  background-color: #734198;
  margin: auto;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #f15c7b;
  font-family: 'Roboto', sans-serif;
  width: 350px;
  border-radius: 12px 12px 0px 0px
}

.box2 {
  background-color: #c594ec;
  margin: auto;
  padding: 20px;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  width: 350px;
}

.box2 .date{
  background-color: #d4c2e3;
  text-align:center;
    font-family: 'Roboto', sans-serif;
  font-size: 14px;
  width: 80px;
  height: 20px;
  margin: auto;
  padding: 10px;
  border-radius: 15px;

  
}

.box2 .time-left{
  color: #f15c7b; 
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}
.box2 .time-right{
  color: #f15c7b; 
  font-size: 14px;
  float: right;
}
.box2 .text-left{
  font-size: 18px;
  padding: 10px;
  margin: 3px;
  margin-left: 30px;
  width: auto;
  background: #ffc7d2;
  border-radius: 15px;
  font-family: 'Roboto', sans-serif;
  display:inline-block;
}
.box2 .text-right{
  font-size: 18px;
  padding: 10px ;
  margin: 5px;
  width: auto;
  display:inline-block;
  float: right;
  background: #72b06d;
  border-radius: 15px;
  font-family: 'Roboto', sans-serif;
}

.box3 {
  background-color: #734198;
  margin: auto;
  padding: 20px;
  font-size: 20px;
  font-family: 'Sarabun', sans-serif;
  width: 350px;
  border-radius: 0px 0px 12px 12px;
}


  input[type=text] {
  width: auto;
  margin: auto;
  padding: 10px;
  box-sizing:border-box;
  border: 4px solid #f4333b;
  border-radius: 10px;
  flex: 1;
}

button {
  width:auto;
  height:40px;
  background: none;
  border: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.