JSFiddle - React, Tailwind, and code Playground
HTML
<section class="offers">
<h2>GIFTS</h2>
<article><div class="offer"> <a href="/cgi-bin/ss000465.pl?PRODREF=4801&NOLOGIN=1"><img src="acatalog/petit-edmundo-3-tubed.jpg" alt="Montecristo Petit Edmundo Cigars - Pack of 3 Tubed Cigars" title="Montecristo Petit Edmundo Cigars - Pack of 3 Tubed Cigars" =""></a>
<a href="/cgi-bin/ss000465.pl?PRODREF=4801&NOLOGIN=1"><p class="name">Montecristo Petit Edmundo Cigars - Pack of 3 Tubed Cigars</p></a>
<p class="price"></p><p class="product-price">
<span class="important">BUY NOW:</span> £49.90
</p><p></p>
<a href="/cgi-bin/ss000465.pl?PRODREF=4801&NOLOGIN=1" class="view-button">View</a>
</div><div class="offer"> <a href="/cgi-bin/ss000465.pl?PRODREF=4246&NOLOGIN=1"><img src="acatalog/starter-kit-with-box.jpg" alt="Cigar Gift Box Starter Kit - Premium Range" title="Cigar Gift Box Starter Kit - Premium Range" =""></a>
<a href="/cgi-bin/ss000465.pl?PRODREF=4246&NOLOGIN=1"><p class="name">Cigar Gift Box Starter Kit - Premium Range</p></a>
<p class="price"></p><p class="product-price">
<span class="important">BUY NOW:</span> £42.95
</p><p></p>
<a href="/cgi-bin/ss000465.pl?PRODREF=4246&NOLOGIN=1" class="view-button">View</a>
</div><div class="offer"> <a href="/cgi-bin/ss000465.pl?PRODREF=4184&NOLOGIN=1"><img src="acatalog/cohiba_Supremo_single_cigar.jpg" alt="Cohiba Robusto Supremos Cigars (Limited Edition 2014) - 1 Single cigar " title="Cohiba Robusto Supremos Cigars (Limited Edition 2014) - 1 Single cigar " =""></a>
<a href="/cgi-bin/ss000465.pl?PRODREF=4184&NOLOGIN=1"><p class="name">Cohiba Robusto Supremos Cigars (Limited Edition 2014) - 1 Single cigar </p></a>
<p class="price"></p><p class="product-price">
<span class="important">BUY NOW:</span> £49.99
</p><p></p>
<a href="/cgi-bin/ss000465.pl?PRODREF=4184&NOLOGIN=1" class="view-button">View</a>
</div></article>
</section>
CSS
a, p, li, h1, h2, h3, h4, h5, h6, input, * {
font-family: 'Belleza', sans-serif;
color: #39393A;
}
section.offers, section.recommendations {
float: left;
width: 100%;
padding: 10px 0 15px 0;
border-bottom: 1px solid #39393A;
}
.offers article, .recommendations article {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
float: left;
width: 100%;
flex-flow: row wrap;
justify-content: space-around;
}
section h2 {
float: left;
width: 100%;
margin: 0.3em 0;
text-transform: uppercase;
}
.offers p, .offers a, .recommendations p, .recommendations a, .product-entry a, .product-entry p, .section-entry a, .section-entry p {
margin: 0.3em 0;
font-size: 17px;
float: left;
clear: both;
max-width: 200px;
}
p.price {
font-weight: bold;
margin: 0;
}
.offer img, .recommendation img, .product-entry img, .section-entry img {
max-width: 200px;
height: auto;
width: auto;
max-height: 120px;
}
p.name {
color: #e35f00;
margin: 0;
}
p.product-price {
width: 100%;
}
p.product-price, p.quantity, p.add-to-cart {
float: left;
margin: 1em 0 0.2em 0;
}
p.quantity, p.product-price {
text-transform: uppercase;
font-weight: bold;
}
a.view-button {
float: left;
padding: 7px 30px;
background: #e35f00;
color: #ffffff;
text-transform: uppercase;
position: relative;
bottom: 0;
left: 0;
margin-top: auto;
}
.offer, .recommendation {
float: left;
flex: 1 0 32%;
margin: 0 0.3%;
width: 32%;
position: relative;
display: flex;
flex-direction: column;
}