JSFiddle - React, Tailwind, and code Playground

by sando ahmad

HTML

<div class="marketing-ribbon shadow">

<div class="gs  grid-1of2">
<div class="item superlink">
<img width="15" height="22" class="ir" data-scale-params-2="wid=30&amp;hei=44&amp;fmt=jpeg&amp;qlt=95&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.5,0.5,0,0&amp;iccEmbed=0&amp;layer=comp&amp;.v=1400973213518" alt="" src="http://store.storeimages.cdn-apple.com/4124/as-images.apple.com/is/image/AppleInc/aos/published/images/s/hi/shipping/ribbon/shipping-ribbon-2013?wid=15&amp;hei=22&amp;fmt=jpeg&amp;qlt=95&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.5,0.5,0,0&amp;iccEmbed=0&amp;layer=comp&amp;.v=1400973213518">
<h3>
	<a class="superlink" data-display-name="AOS: campaigns/shipping_and_returns" data-feature-name="Astro Link" data-slot-name="main2" href="/us/browse/campaigns/shipping_and_returns"><span>Free shipping. Free returns.</span></a>
</h3>
<p class="compactx1">
	<span>Free shipping on all orders over $50 or pick up in store.</span>
</p>
</div>
</div>


<div class="gs  grid-1of2">
<div class="item superlink">
<img width="11" height="20" class="ir" data-scale-params-2="wid=22&amp;hei=40&amp;fmt=png-alpha&amp;qlt=95&amp;.v=1400759272486" alt="" src="http://store.storeimages.cdn-apple.com/4124/as-images.apple.com/is/image/AppleInc/aos/published/images/h/ol/holiday/ribbon/holiday-ribbon-finance-2013?wid=11&amp;hei=20&amp;fmt=png-alpha&amp;qlt=95&amp;.v=1400759272486">
<h3>
	<a class="superlink" data-display-name="AOS: store.apple.com/go/ww/financing" data-feature-name="Astro Link" data-slot-name="main2" href="http://store.apple.com/go/ww/financing">Special financing offer.</a>
</h3>
<p>
  No interest if paid in full within the 6-, 12-, or 18-month period. Terms apply.
  
</p>
</div>
</div>









</div>
<a class="button merchandising superlink" data-display-name="AOS: home/shop_mac/family/macbook_air" data-feature-name="Astro Link" data-slot-name="main3" href="/us/buy-mac/macbook-air"><span>Buy now</span>
				<span class="a11y">
					<span>MacBook...

CSS

.compactx-5{margin-left:-5%;margin-right:-5%}
.compactl-5{margin-right:-5%}
.compactr-5{margin-left:-5%}
.compactx-4{margin-left:-4%;margin-right:-4%}
.compactl-4{margin-right:-4%}
.compactr-4{margin-left:-4%}
.compactx-3{margin-left:-3%;margin-right:-3%}
.compactl-3{margin-right:-3%}
.compactr-3{margin-left:-3%}
.compactx-2{margin-left:-2%;margin-right:-2%}
.compactl-2{margin-right:-2%}
.compactr-2{margin-left:-2%}
.compactx-1{margin-left:-1%;margin-right:-1%}
.compactl-1{margin-right:-1%}
.compactr-1{margin-left:-1%}
.compactx0{margin-left:0%;margin-right:0%}
.compactl0{margin-right:0%}
.compactr0{margin-left:0%}
.compactx01{margin-left:1%;margin-right:1%}
.compactl01{margin-right:1%}
.compactr01{margin-left:1%}
.compactx02{margin-left:2%;margin-right:2%}
.compactl02{margin-right:2%}
.compactr02{margin-left:2%}
.compactx03{margin-left:3%;margin-right:3%}
.compactl03{margin-right:3%}
.compactr03{margin-left:3%}
.compactx04{margin-left:4%;margin-right:4%}
.compactl04{margin-right:4%}
.compactr04{margin-left:4%}
.compactx05{margin-left:5%;margin-right:5%}
.compactl05{margin-right:5%}
.compactr05{margin-left:5%}
.pusht05{padding-top:5px}
.pushb05{padding-bottom:5px}
.compactx06{margin-left:6%;margin-right:6%}
.compactl06{margin-right:6%}
.compactr06{margin-left:6%}
.compactx07{margin-left:7%;margin-right:7%}
.compactl07{margin-right:7%}
.compactr07{margin-left:7%}
.compactx08{margin-left:8%;margin-right:8%}
.compactl08{margin-right:8%}
.compactr08{margin-left:8%}
.compactx09{margin-left:9%;margin-right:9%}
.compactl09{margin-right:9%}
.compactr09{margin-left:9%}
.compactx10{margin-left:10%;margin-right:10%}
.compactl10{margin-right:10%}
.compactr10{margin-left:10%}
.pusht10{padding-top:10px}
.pushb10{padding-bottom:10px}
.compactx11{margin-left:11%;margin-right:11%}
.compactl11{margin-right:11%}
.compactr11{margin-left:11%}
.compactx12{margin-left:12%;margin-right:12%}
.compactl12{margin-right:12%}
.compactr12{margin-left:12%}
.compactx13{margin-left:13%;margin-rig...