JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="products">
<li>
<h2>Abercrombie & Fitch</h2>
<img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
<div>
<span class="price"><b>Price:</b> US $65</span>
<span class="COD"><b>COD:</b> AE001 </span>
</div>
</li>
<li>
<h2>Hollister</h2>
<img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
<div>
<span class="price"><b>Price:</b> US $65</span>
<span class="COD"><b>COD:</b> AE001 </span>
</div>
</li>
<li>
<h2>Abercrombie & Fitch</h2>
<img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
<div>
<span class="price"><b>Price:</b> US $65</span>
<span class="COD"><b>COD:</b> AE001 </span>
</div>
</li>
<li>
<h2>Hollister</h2>
<img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
<div>
<span class="price"><b>Price:</b> US $65</span>
<span class="COD"><b>COD:</b> AE001 </span>
</div>
</li>
<li>
<h2>Abercrombie & Fitch</h2>
<img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
<div>
<span class="price"><b>Price:</b> US $65</span>
<span class="COD"><b>COD:</b> AE001 </span>
</div>
</li>
</ul>
CSS
ul.products
{
list-style:none;
margin:0;
padding:0;
}
.products li
{
float:left;
margin-right:1em;
margin-bottom:1.2em;
}
.products li img
{
padding:6px;
background-color: #e9f1f8;
border: 1px solid #d3e6f6;
}
.products li h2
{
color: #325A8C;
font-size:16px;
text-align:center;
font-family:serif;
}
.products li div
{
font-weight:bold;
}
.products li div .price
{
color: #349031;
}
.products li div .COD
{
color: #44403F;
float:right;
padding-right: 1.5em;
}
.products li div .price b, .products li div .COD b
{
color:#000;
}