JSFiddle - React, Tailwind, and code Playground

by kieranbs96

HTML

<section class="offers">
     <h2>GIFTS</h2>
     <article><div class="offer">	<a href="/cgi-bin/ss000465.pl?PRODREF=4801&amp;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" &nbsp;=""></a>
	<a href="/cgi-bin/ss000465.pl?PRODREF=4801&amp;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&amp;NOLOGIN=1" class="view-button">View</a>
	</div><div class="offer">	<a href="/cgi-bin/ss000465.pl?PRODREF=4246&amp;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" &nbsp;=""></a>
	<a href="/cgi-bin/ss000465.pl?PRODREF=4246&amp;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&amp;NOLOGIN=1" class="view-button">View</a>
	</div><div class="offer">	<a href="/cgi-bin/ss000465.pl?PRODREF=4184&amp;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 " &nbsp;=""></a>
	<a href="/cgi-bin/ss000465.pl?PRODREF=4184&amp;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&amp;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;
}


.offer, .recommendation {
    float: left;
    flex: 1 0 32%;
    margin: 0 0.3%;
    width: 32%;
    position: relative;
}