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">
        <div class="price">
          <sup class="symbol">$</sup><span class="dollars">34</span><sup class="cents">.99</sup><span class="tax">+ TAX</span>
        </div>
      </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;
}

.price { 
  position: relative;
  top: 50%;
  transform: translate(-10%, -50%);
}

.offer .symbol {
  position: relative;
  top: -30px;
}

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

.offer .cents {
  position: relative;
  top: -32px;
}

.offer .tax:before {
  content: ' ';
  display: block;
}

.offer .tax {
  position: relative;
  top: -10px;
  left: 30%;
}