JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxCurved" id="passPurchase">
    <div style="text-align: center;" class="headSidebar">August Video Limit Exceeded</div>

    <div id="passPlans">
        <div class="pass btnAction">
            <strong>Buy One Day Pass</strong><br>
            $10
        </div>
        <div class="pass btnAction">
            <strong>Buy August Pass</strong><br>
            $100
        </div>

        <div class="clearBoth"></div>
    </div>

    <div class="clearBoth"></div>

    <input type="checkbox" id="tac" name="tac"> <a href="">Terms and Conditions</a>

    <p>Video purchase fees will be deducted from your account balance.</p>

    <div class="passFooter">
        <div style="float: left;" class="balance">My Balance: <strong>$250.00</strong></div>
        <div style="float: left;" class="qdeposit"><a href="quick_deposit">Quick Deposit</a></div>
        <div style="float: left;" class="faq"><a href="faqs">FAQ</a></div>

        <div style="float: right; width: 100px;" onclick="window.close();" class="btnAction">Close</div>
    </div>

    <div class="clearBoth"></div>

</div>

CSS

.headSidebar {
  background: -moz-linear-gradient(center top , rgba(0, 157, 93, 0.94) 4%, rgba(0, 153, 90, 0.94) 12%, #009759 16%, #007240 84%, rgba(0, 112, 62, 0.94) 88%, rgba(0, 108, 59, 0.94) 96%) repeat scroll 0 0 transparent;
  border-radius: 5px 5px 5px 5px;
  color: white;
  display: block;
  font-size: 1.3em;
  font-weight: bold;
  height: 26px;
  line-height: 26px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  text-indent: 10px;
}

.pass {
    border: 1px solid #000;
    display: inline-block !important;
    *display: inline !important;
    zoom: 1;
    text-align: center;
    margin: 10px;
}

#passPlans {
    text-align: center;
}

.btnAction {
  background: -moz-linear-gradient(center top , #FEFEFE 0%, #E5E7E9 100%, #F9FAFB 100%) repeat scroll 0 0 transparent;
  border-radius: 5px 5px 5px 5px;
  color: #1C75BC;
  cursor: pointer;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 3px 5px;
  text-align: center;
}

.clearBoth, .clearFloat {
  clear: both !important;
  height: 0;
}