JSFiddle - React, Tailwind, and code Playground

by Jacob Goh

HTML

<div class="row">
   <div class="col-xs-12">
      <div class="box box-container">
         <div class="row">
            <div class="col-xs-4" style=" display: flex; flex-direction: column; justify-content: center; ">
               <div class="box-first box-container">
                  <div class="row">
                     <div class="col-xs">
                        <div>ONE</div>
                        <div style="font-size:15px;">100,000</div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-4" style=" display: flex; flex-direction: column; justify-content: center; ">
               <div class="box-first box-container">
                  <div class="row">
                     <div class="col-xs">
                        <div>TWO TWO TWO</div>
                        <div style="font-size:15px;">2,350</div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                  
                  <figure>
  <div class="figure-content">
    <svg width="40%" height="auto" viewBox="0 0 42 42" class="donut" aria-labelledby="beers-title beers-desc" role="img">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff" role="presentation"></circle>
      <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" role="presentation"></circle>

      <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25" aria-labelledby="donut-segment-1-title donut-segment-1-desc">
      </circle>
      <!-- unused 10% -->
      <g class="chart-text">
        <text x="50%" y="50%" class="chart-number">
          THR
        </text>
        <text...

CSS

@import url(https://fonts.googleapis.com/css?family=Karla);.row{box-sizing:border-box;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.col-xs,.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */figure{display:block}html{font-family:'Karla';-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;overflow:hidden;background: #fff;}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:'Karla',"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#fff;line-height:1.4rem}:focus{outline-color:transparent;outline-style:none}.box,.box-first{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;overflow:hidden;text-align:center;color:#555555}.box-container{box-sizing:border-box;padding:.5rem}@media only screen and (min-width:48rem){body{font-size:16px}.box,.box-first{padding:1rem}}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1...