JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="wrapper-promo">
    <div class="title-top">
        <h2>
		    New from Onvia</h2>
    </div>
    <div class="promo-content">
        <h3>
            Onvia Guide for Small Business</h3>
        <h4>
            Starts at $45/month</h4>
        <p>
            Bids and RFP's from all DemandStar agencies plus thousands of additional agencies. Onvia Guide for Small Business gives you the best coverage and the fastest notification available anywhere.</p>
        <p style="margin-top:20px">
            <img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
        </p>
    </div>
<a href="http://info.onvia.com/demandstar-small-business?utm_source=demandstar&utm_medium=acct&utm_campaign=adbutler_paid_001"></a>
</div>

CSS

.wrapper-promo {
  background-color: #2362a6;
  margin: 10px 0;
  width: 100%;
}

.wrapper-promo {
  position: relative;
}
.wrapper-promo > a {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

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

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

    .wrapper-promo h2 {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 22px;
        color: #ffffff;
        margin: 0;
        text-align: center;
        text-transform: none;
        font-weight: bold;
    }

    .wrapper-promo h3 {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 20px;
        color: #ffffff;
        margin: 0 0 5px 0;
        text-align: left;
        font-weight: bold;
    }

    .wrapper-promo h4 {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 16px;
        color: #ffffff;
        margin: 0 0 10px 0;
        text-align: left;
        font-weight: normal;
    }

.wrapper-promo p {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        color: #ffffff;
        margin: 0 0 10px 0;
        text-align: left;
        font-weight: normal;
        line-height: 21px
}

.cozy { margin: 30px 0; }