JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tilecontainer">
<div class="tile">
<div class="content">
<strong>#1</strong>
<p>Ut augue urna, tristique ut turpis quis, lobortis iaculis libero. Cras maximus rhoncus enim vitae blandit. Maecenas elit elit, vulputate sit amet velit volutpat, vulputate egestas sem.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#2</strong>
<p>Vestibulum ipsum quam, faucibus nec aliquet eget, molestie vel urna. Integer et dui mi.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#3</strong>
<p>Proin metus ipsum, volutpat sed est vitae, cursus aliquam diam.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#4</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ut felis a est scelerisque maximus faucibus ut justo.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#5</strong>
<p>Curabitur eget convallis tortor. Maecenas a faucibus nunc.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#6</strong>
<p>Duis cursus, felis quis commodo cursus, diam arcu molestie eros, at cursus nulla lorem ac lectus. Vestibulum gravida congue urna, in volutpat magna facilisis et. Sed ac aliquet mi.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#7</strong>
<p>Phasellus in justo suscipit, auctor justo sed, pretium erat. Vestibulum nec quam lorem. Maecenas quis felis vitae enim ultrices euismod id eget nulla.</p>
</div>
</div>
<div class="tile">
<div class="content">
<strong>#8</strong>
<p>Nunc a dui...
CSS
*{
box-sizing: border-box;
font-family: Arial, Verdana, sans-serif;
}
.tilecontainer{
width: 100%;
}
.tile{
width:33.33333333%;
display: inline-block;
vertical-align: top;
margin: -2px;
}
.tile > .content{
background: #DDDDDD;
border: 1px solid #aaa;
margin: 10px 8px;
padding: 10px;
font-size: 14px;
line-height: 1.6em;
}