JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="rev_container rev_white_bg">
<div class="rev_flex1">
<div class="rev_item">123</div><div class="rev_item">456</div>
</div>
</div>
<div class="rev_container rev_green_bg">
<div class="rev_cta">
Blah blah blah!<div class="rev_but">
<a href="/more/">More</a>
</div>
</div>
<div class="rev_cta">
<span>Blah!</span>
</div>
<div class="rev_flex2">
<div class="rev_it">"123"</div><div class="rev_it">"456"</div><div class="rev_it">"789"</div>
</div>
<div class="rev_cta">
<a href="/more/">Read More!</a><p>
Blah!<br>
<span>Blah Blah!</span><br>(blah)</p>
<div class="rev_but">
<a href="/more/">Blah!</a>
</div>
</div>
</div>CSS
body {margin:0;}
.rev_container {padding:0 20px;}
.rev_item {max-width:300px;text-align:center;}
.rev_it {max-width:300px;background-color:#ffffff;text-align:center;padding:20px 20px 50px 20px;box-sizing: border-box;border-radius:6px;line-height:22px;color:#444444;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAQCAMAAAC/fKiJAAAAA3NCSVQICAjb4U/gAAAA3lBMVEUAAADo6ICQjEpTUyz+7Xv///8oJhPKyW+8umJvbjwNDAb/+4VBPyP07n3j3HOem1JiYDL963oiIRLPx2l4eEHc1nD09IWwrVxhXjH/83///4twbDj87oVHRib97XwvLhnX0m8IBwTp4XbEw2j9732BgEPWzmzZ2Hn/9oHx7X387X7//4cTEgn9+IKXk0///4//8H1+ekH87oP794Tp5Xr97Xrn3nVLSSb/94L//4n/733q537//YVxbjpjYjTe1XD/8X7/9X7/94P//5FUUi0pJxUODQf/+4dAQCIwLxn5ZEXRAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAzLzE4LzI1lb1qrwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAADmSURBVDiNrZRbTwIxEIUHZAFdQQe80JWbsmrZCuUWNDHCPgCB//+H7HQHI7zOnoc2/XJy2k4v0D1TkAMA7rVG37eDRA6AwX1dnTokgEOj1WuE/x0iAInXqHxtSiTnkAMXqoyxfdh9W2tSmlYOIPlqtn6mHYDN9On2TTuHHLiVDi+BdVeb0LRiQDWNqlsaHgZRHPsCSYE/KDsm8GgRMau6EPjQ8BM+rqBlsvshBxSq19B7rzSeF4odUkChpnjxEIaF/Y3hvUiB3/5LqBD1fBlz1aXAfyjKjRHT1DWzIAfAz/RPxzcnAr8gTJjA7WXYxgAAAABJRU5ErkJggg==);background-repeat: no-repeat;background-position: center bottom 20px;-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);}
.rev_white_bg {background-color:#ffffff;z-index:20;position:relative;
-webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.2);
box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.2);}
.rev_green_bg {background-color:#F8FCF8;z-index:0;box-sizing: border-box;padding:20px;}
.rev_cta {max-width:1100px;margin:auto;text-align:center;padding:20px 0;}
.rev_cta span {color:#003162;font-weight:600;font-size:18px;}
.rev_cta a {color:#444444;text-decoration:underline;}
.rev_but a {display:inline-block;background-color:#4CAF50;padding:10px 20px;border-radius:6px;margin:20px auto 0px...