JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<h3>
<span>
<a href="#">Some text here Some text here Some text here Some text here</a>
</span>
</h3>
<a href="#">
<img src="https://unsplash.it/200"/>
</a>
<div class="price-box">
<p class="old-price">
<span class="old-label">was:</span>
<span id="old-price-176" class="price">$9999.99</span>
</p>
<p class="special-price">
<span id="product-price-176" class="price">$9999.00</span>
</p>
</div>
<div class="actions">
<a href="#">Learn More</a>
</div>
</li>
<li>
<h3>
<span>
<a href="#">Some text here</a>
</span>
</h3>
<a href="#">
<img src="https://unsplash.it/200"/>
</a>
<div class="price-box">
<p class="old-price">
<span class="old-label">was:</span>
<span id="old-price-176" class="price">$9999.99</span>
</p>
<p class="special-price">
<span id="product-price-176" class="price">$9999.00</span>
</p>
</div>
<div class="actions">
<a href="#">Learn More</a>
</div>
</li>
<li>
<h3>
<span>
<a href="#">Some text here</a>
</span>
</h3>
<a href="#">
<img src="https://unsplash.it/200"/>
</a>
<div class="price-box">
<p class="special-price">
<span id="product-price-176" class="price">$9999.00</span>
</p>
</div>
<div class="actions">
<a...
CSS
ul {overflow: hidden; width: 100%;}
ul li {display: block; width: 33.3%; float: left; text-align: center; }