<div class="phoneswrapper">
  
  <div class="phone">
    <div class="phone_head">
      <div class="title"> My Chats </div>
      <div class="icon_bubble msg"> </div>
    </div>
    <div class="divider"> </div>
    <div class="phone_body">
       <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/32.jpg">
         <div class="chat_info">
           <div class="contact_name">Patric Venturini </div>
           <div class="contact_msg">Are you planning to play anything tonight?  </div>
         </div>
         <div class="chat_status">
           <div class="chat_date">9:20 PM</div>
           <div class="chat_new grad_pb"> New </div>
         </div>
      </div>
      
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/11.jpg">
         <div class="chat_info">
           <div class="contact_name">Adriano Canofre </div>
           <div class="contact_msg">Dude can you help me with my motorcycle?</div>
         </div>
         <div class="chat_status">
           <div class="chat_date">8:12 PM</div>
           <div class="chat_new grad_pb"> New </div>
         </div>
      </div>
      
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/32.jpg">
         <div class="chat_info">
           <div class="contact_name">Patric Venturini </div>
           <div class="contact_msg">Are you planning to play anything tonight?  </div>
         </div>
         <div class="chat_status">
           <div class="chat_date">Yesterday</div>
           <div class="chat_new grad_pb"> New </div>
         </div>
      </div> 
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/11.jpg">
         <div class="chat_info">
           <div class="contact_name">Adriano Canofre </div>
           <div class="contact_msg">Dude can you help me with my motorcycle?</div>
         </div>
         <div class="chat_status">
           <div class="chat_date">Yesterday</div>
            
         </div>
      </div>
      
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/32.jpg">
         <div class="chat_info">
           <div class="contact_name">Patric Venturini </div>
           <div class="contact_msg">Are you planning to play anything tonight?  </div>
         </div>
         <div class="chat_status">
           <div class="chat_date">Yesterday</div>
            
         </div>
      </div>
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/11.jpg">
         <div class="chat_info">
           <div class="contact_name">Patric Venturini </div>
           <div class="contact_msg">Are you planning to play anything tonight?  </div>
         </div>
         <div class="chat_status">
           <div class="chat_date">Yesterday</div>
            
         </div>
      </div>
      
      <div class="chat">
         <img class="chat_avatar" src="https://randomuser.me/api/portraits/men/32.jpg">
         <div class="chat_info">
           <div class="contact_name">Patric Venturini </div>
           <div class="contact_msg">Are you planning to play anything tonight?  </div>
         </div>
         <div class="chat_status">
           <div class="chat_date">Yesterday</div>
            
         </div>
      </div>
    </div> <!-- phonebody -->
    
    <div class="phone_footer">
      <div class="footer_divider grad_pb"> </div>
    </div>
  </div>
  

</div>
* { box-sizing: border-box}
body{
  font-family: 'Asap', sans-serif;
}
.phoneswrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.phone{
  height:  600px;
  width: 300px; 
  padding: 10px 20px;
  border-radius: 32px;
  border: 8px solid #3e3e3e;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 17px 20px rgba(0, 0, 0, 0.15);

}
.phone_head {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
     align-items: center;
    height: 45px;
}
.phone_head .title{
  font-size: 24px;
  font-weight: 500;
  color: #34394F;
}
.icon_bubble.msg {
    width: 30px;
    height: 30px;
    background: linear-gradient( 90deg, #d13eea, #53d9ea);
    border-radius: 50%;
}

.divider {
    height: 1px;
    width: 111%;
    background: linear-gradient( 90deg, #d13eea, #53d9ea);
    margin-bottom: 12px;
}
.grad_pb{ background: linear-gradient( 90deg, #d13eea, #53d9ea);
  color: white; 
  }
img.chat_avatar {
    width: 45px;
  height: 45px;
    border-radius: 7px;
  margin-right: 8px;
}
img.chat_avatar {
    width: 45px;
   box-shadow: 1px 6px 18px rgba(31, 37, 72, 0.45);
    border-radius: 7px;
}

.chat {
    display: flex;
    justify-content: space-between;
    padding: 15px 0px;
    border-bottom: 1px solid #d3d3d35e;
}

.contact_name {font-weight: 500;

  color: #34394F;
     font-size: 15px;
    margin-bottom: 2px;}

.contact_msg {
   
     font-size: 11px;
    color: #a5a5a5;
    font-weight: lighter;
}
.chat_info {width: 50%;}

.chat_date {
    font-size: 12px;
    color: #5a5a5a;
  margin-bottom: 2px;
}

.chat_new{
  padding: 2px 5px;
  font-size: 11px;
  border-radius: 2px;
}
.chat_status {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.phone_footer {
    position: absolute;
    bottom: 0;
    height: 61px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0px;
    background: linear-gradient(0deg, white 40%, #ffffffa1 85%, transparent 95%);
}

.footer_divider {
    height: 5px;
    width: 45%;
    border-radius: 10px;
  
     margin-top: 35px;
}
// https://www.uplabs.com/posts/chat-app-ui-27009da0-980a-450a-a026-32c93585daef

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.