JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="activity-comments">
  <li>
    <div style="border: solid 1px #ff0000;">
      <div style="float:left;border: solid 1px #0000ff;">
          <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"/>
      </div>
      <div>
        <small>Some sample text here 1</small>
      </div>
      <div>
        <small>Posted 1 day ago</small>
      </div>
    </div>
  </li>
  <li>
    <div style="border: solid 1px #ff0000;">
      <div style="float:left;border: solid 1px #0000ff;">
          <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"/>
      </div>
      <div>
        <small>Some sample text here 2</small>
      </div>
      <div>
        <small>Posted 2 days ago</small>
      </div>
    </div>
    </li>
</ul>

CSS

.activity-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}
.activity-comments li {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    margin: 0 0 10px;
    padding: 5px;
    position: relative;
}

.activity-comments li strong {
	font-weight: bold;
	font-size: 20px;
	margin-left: 5px;
}
.activity-comments li small {
	margin-left: 5px;
	font-size: 12px;
	color: #888888;
	font-style: italic;
}

.thumb-small {
	width:35px;
	height:35px;
	 border: 1px solid #B6BCBF;
     
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
img{display:block;}