JSFiddle - React, Tailwind, and code Playground

HTML

<ul>


<li class="date">Date: 1/25/2015</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/25/2015</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about...

CSS

body {margin:0; background:lightgray;}
ul, li {
  list-style-type: none;
  padding:0px;
  margin:0px;
}
.user {font-weight:bold; padding-right: 5px;}
.msg{
 display:flex;
 background:white;
 margin: 20px;
 margin-left:5px;
 padding: 20px;
 border-radius: 15px;
}
.date {width:100%; background: tomato; text-align:center; padding: 15px; color:white; font-weight:bold; }