JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<!-- Inside H1 -->
<h1><p class='innerCircleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='innerCircleBlue'>10000%</p>

CSS

p.innerCircleBlue{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #159fda;
  border: 5px Solid #fff;
  color: #fff;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
  padding:20px;
   box-shadow: 0px -0px  0px 3px #159fda;
   -webkit-box-shadow: 0px -0px  0px 3px  #159fda;
 -moz-box-shadow: 0px -0px  0px 3px #159fda;
   margin:5px;
}

p.innerCircleBlue:before{
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}