JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="special-price col-xs-12 col-md-8 col-md-offset-2">
    <div class="general-comparison clearfix">
      <div class="offer">
        <sup class="symbol">$</sup><span class="dollars">34</span><sup class="cents">.99</sup><span class="tax">+ TAX</span>
      </div>
      <!-- end .general-comparison -->
    </div>
  </div>
</div>

CSS

.special-price {
  text-align: center;
  background-color: #2e566e;
}

.special-price .offer {
  border-radius: 50%;
  background-color: #56c243;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  height: 150px;
  width: 150px;
  display: inline-block;
  text-align: center;
  border: 1px solid;
}

.offer .symbol {
  vertical-align: top;
}

.offer .dollars {
  font-size: 60px;
}

.offer .cents {
  vertical-align: top;
}