JSFiddle - React, Tailwind, and code Playground

by Misha Drobot

HTML

<div class="block">
  <div class="price">
    <span class="cost">
      0
    </span>
    <div class="time">
      /month
    </div>
  </div>
</div>

CSS

.block {
  position:absolute;
  transform:translate(-50%,-50%);
  left:50%;
  top:50%;
  background:#b47eb9;
  padding:100px;
  color:#fff;
 }
 
 .price {
   display:flex;
   
 }
 .cost {
   position:relative;
   font-size:24px;
   
 }
 .time {
   line-height:36px;
 }
 .cost:before {
   content:"$";
   font-size:12px;
   color:#fff;
   position:absolute;
   left:-6px;
   top:-3px;
 }