JSFiddle - React, Tailwind, and code Playground

by Faisal Khan Janjua

HTML

<div class="container">
  <div class="chatGrid">
    <div class="singleRow">
      <div class="circle"></div>
      <div class="rowContent">
        <h3>Name Here</h3>
        <p>Descrip tion here Desc ription here Des cript ion here Descr ipt ion here Descr ipti on here Descr iption here Descrip tion here </p>
      </div>
    </div>
    <div class="singleRow">
      <div class="circle"></div>
      <div class="rowContent">
        <h3>Name Here</h3>
        <p>Descrip tion here Desc ription here Des cript ion here Descr ipt ion here Descr ipti on here Descr iption here Descrip tion here </p>
      </div>
    </div>
    <div class="singleRow">
      <div class="circle"></div>
      <div class="rowContent">
        <h3>Name Here</h3>
        <p>Descrip tion here Desc ription here Des cript ion here Descr ipt ion here Descr ipti on here Descr iption here Descrip tion here </p>
      </div>
    </div>
    
    
  </div>
</div>

CSS

.container {
  background: #F0F0F0;
  min-height: 400px;
  max-width: 400px;
  margin: auto;
}

.singleRow {
  width: 100%;
  float: left;
  padding: 6px;
  clear: both;
  box-sizing: border-box;
  background: #9f9;
}

.circle {
  width: 80px;
  height: 80px;
  float: left;
  background: #f99;
  margin-right: 10px;
  border-radius: 50%;
  border: 8px double #333;
}

.rowContent h3, .rowContent p {
  margin: 0;
}