JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div id="wrapper-segmentation">
    <div id="leftcolumn">
	<div class="wrapper-description">
		<div class="title-top">
			<h2 class="block-title">
				Three states or less</h2>
		</div>
		<div class="promo-content">
            <p>Bid and RFP notification only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
		</div>
    </div>
        </div>
    <div id="centercolumn">
        Center
    </div>
    <div id="rightcolumn">
	<div class="wrapper-description">
		<div class="title-top">
			<h2 class="block-title">
				National or Regional</h2>
		</div>
		<div class="promo-content">
            <p>Bid and RFP notification</p>
            <p>Fully searchable historical bid database</p>
            <p>Market, agency and competitive intelligence</p>
            <p>Dedicated account manager</p>

            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>
    </div>
</div>

CSS

#wrapper-segmentation {
     width: 100%;
     margin: 0 auto;
}

#leftcolumn, #rightcolumn, #centercolumn {
    float: left;
    color: white;
    text-align: center;
}

#leftcolumn {
     border: 1px #f66511;
     width: 45%;
     background-color: #e2e3e4;
}

#centercolumn {
     width: 10%;
     background-color: #ffffff;
}

#rightcolumn {
     width: 45%;
     background-color: #e2e3e4;
}

.wrapper-description {
    background-color: #e2e3e4;
    width: 100%;
}

.title-top-orange {
    background-color: #2251a4;
    height: 40px;  
    line-height: 40px;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
    padding: 0 0 10px 0;
}

h2 {
	font-family:Arial,sans-serif;
	font-size:19px;
    font-weight: bold;
	color:#fff;
    margin: 10px 0 -10px 0;
    text-transform:none;
}

    h2.block-title {
        font-size:22px;
        margin: 0;
        text-align: center;
        text-transform:none;
    }

    .promo-content p {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: #232323;
    line-height: 20px;
    text-align: center;
 }