JSFiddle - React, Tailwind, and code Playground

by Bhavik Patel

HTML

<body>
        <div class="page"> 
          
          <!-- default -->
          <div class="clearfix">
            <div class="c100 p25"> <span>25%</span>
              <div class="slice">
                <div class="bar"></div>
                <div class="fill"></div>
              </div>
            </div>
             
            
          </div>
          <!-- /default --> 
        </div>
</body>

CSS

.rect-auto,  .c100.p51 .slice,  .c100.p52 .slice,  .c100.p53 .slice,  .c100.p54 .slice,  .c100.p55 .slice,  .c100.p56 .slice,  .c100.p57 .slice,  .c100.p58 .slice,  .c100.p59 .slice,  .c100.p60 .slice,  .c100.p61 .slice,  .c100.p62 .slice,  .c100.p63 .slice,  .c100.p64 .slice,  .c100.p65 .slice,  .c100.p66 .slice,  .c100.p67 .slice,  .c100.p68 .slice,  .c100.p69 .slice,  .c100.p70 .slice,  .c100.p71 .slice,  .c100.p72 .slice,  .c100.p73 .slice,  .c100.p74 .slice,  .c100.p75 .slice,  .c100.p76 .slice,  .c100.p77 .slice,  .c100.p78 .slice,  .c100.p79 .slice,  .c100.p80 .slice,  .c100.p81 .slice,  .c100.p82 .slice,  .c100.p83 .slice,  .c100.p84 .slice,  .c100.p85 .slice,  .c100.p86 .slice,  .c100.p87 .slice,  .c100.p88 .slice,  .c100.p89 .slice,  .c100.p90 .slice,  .c100.p91 .slice,  .c100.p92 .slice,  .c100.p93 .slice,  .c100.p94 .slice,  .c100.p95 .slice,  .c100.p96 .slice,  .c100.p97 .slice,  .c100.p98 .slice,  .c100.p99 .slice,  .c100.p100 .slice  {
     clip:  rect(auto,  auto,  auto,  auto);
 }

.pie,  .c100 .bar,  .c100.p51 .fill,  .c100.p52 .fill,  .c100.p53 .fill,  .c100.p54 .fill,  .c100.p55 .fill,  .c100.p56 .fill,  .c100.p57 .fill,  .c100.p58 .fill,  .c100.p59 .fill,  .c100.p60 .fill,  .c100.p61 .fill,  .c100.p62 .fill,  .c100.p63 .fill,  .c100.p64 .fill,  .c100.p65 .fill,  .c100.p66 .fill,  .c100.p67 .fill,  .c100.p68 .fill,  .c100.p69 .fill,  .c100.p70 .fill,  .c100.p71 .fill,  .c100.p72 .fill,  .c100.p73 .fill,  .c100.p74 .fill,  .c100.p75 .fill,  .c100.p76 .fill,  .c100.p77 .fill,  .c100.p78 .fill,  .c100.p79 .fill,  .c100.p80 .fill,  .c100.p81 .fill,  .c100.p82 .fill,  .c100.p83 .fill,  .c100.p84 .fill,  .c100.p85 .fill,  .c100.p86 .fill,  .c100.p87 .fill,  .c100.p88 .fill,  .c100.p89 .fill,  .c100.p90 .fill,  .c100.p91 .fill,  .c100.p92 .fill,  .c100.p93 .fill,  .c100.p94 .fill,  .c100.p95 .fill,  .c100.p96 .fill,  .c100.p97 .fill,  .c100.p98 .fill,  .c100.p99 .fill,  .c100.p100 .fill  {
     position:  absolute;
     border:  0.08em solid...