JSFiddle - React, Tailwind, and code Playground

by _hags

HTML

<!-- // badges -->
<div class=badge>
    
  <p>
        <span>50%</span>
        <span class="sub">OFF</span>
    </p>
</div>

<div class="badge sec">
    
  <p>
        <span>15%</span>
        <span class="sub">OFF</span>
    </p>
</div>

<div class="badge third">
    <p>
        <span>15%</span>
        <span class="sub">OFF</span>
    </p>
</div>

CSS

.badge { 
    width: 92px; 
height: 92px;
background: #1C8DFB;
border-radius: 92px;
padding: 1px;
    transform:rotate(25deg);
    -webkit-transform:rotate(25deg); 
}
p { 
border: 5px solid #fff;
border-radius: 80px;
background: #1C8DFB;
color: white;
width: 80px;
height: 80px;
position: relative;
margin: 1px 0 0 1px;
    background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6db3f2 0%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6db3f2 0%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6db3f2 0%,#1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

    
}
span { 
    position: absolute;
top: 16px;
font-weight: bold;
font-size: 22px;
    left: 18px;
font-family: Helvetica, sans;
}
span.sub { margin-top: 20px; }


.sec, .third { 
    margin-top: 10px; 
    background: #67B234;
}
.sec p { 
    background-color: #67B234;
    background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top,  #9dd53a 0%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9dd53a 0%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',...