JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="container-3col">
	<div class="box-3col-1">
		<a href="http://www.apple.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_sizing_up_116x116.png" width="116" /></a>
		<p><strong><a href="http://www.apple.com">Sizing up the $1.5 Trillion State & Local Contracting Market</a></strong></p>
        <p><a href="http://www.apple.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
	</div>
	<div class="box-3col-2">
		<a href="http://www.ibm.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_myths_about_competing_in_sled_116x116.png" width="116" /></a>
		<p><strong><a href="http://www.ibm.com">5 Myths About Competing in the State, Local and Education Government Market</a></strong></p>
        <p><a href="http://www.ibm.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
	</div>
	<div class="box-3col-3">
		<a href="http://www.microsoft.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_things_vendors_sled_116x116.png" width="116" /></a>
		<p><strong><a href="http://www.microsoft.com">5 Things Vendors Who Are Entering the SLED Market Need to Know</a></strong></p>
        <p><a href="http://www.microsoft.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
	</div>
</div>

CSS

/* 3 Column Div */

.container-3col {
    display: flex;
    justify-content: center;
}

.container-3col > div {
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.box-3col-1 {
    width: 33.33333%;
}

.box-3col-2 {
    width: 33.33333%;
}

.box-3col-3 {
    width: 33.33333%;
}

.subcompact { margin: 0 0 10px 0; }