JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<div class="progress-outer">
  <div style="width:0%" class="progress-inner">
    <span>0%</span>
  </div>
</div>
<br>
  <div class="progress-outer">
  <div style="width:5%" class="progress-inner">
    <span>5%</span>
  </div>
</div>
<br>
      
<div class="progress-outer">
  <div class="progress-inner">
    <span>25%</span>
  </div>
</div>
<br>
<div class="progress-outer">
  <div style="width:50%" class="progress-inner">
    <span>50%</span>
  </div>
</div>
<br>
<div class="progress-outer">
  <div style="width:75%" class="progress-inner">
    <span>75%</span>
  </div>
</div>
<br>
<div class="progress-outer">
  <div style="width:100%" class="progress-inner">
    <span>100%</span>
  </div>
</div>

CSS

body{
    font-family:arial;
}

.progress-outer {
    padding:2px;
    background:#FFF;
    border:solid 1px #CCC;
        width: 45px;
   
}

.progress-inner{
    width:35%;
     
 background: rgb(107,186,112); 
    display: inline-block;
}



.progress-inner span{
    color: white;
    font-size: 11px;
     margin-left: 12px;
    text-shadow: 0 -1px 0 rgb(107,186,112),0px 1px 0 rgb(107,186,112),1px 0 0 rgb(107,186,112),-1px 0 0 rgb(107,186,112),-1px -1px 0 rgb(107,186,112),-1px 1px 0 rgb(107,186,112),1px 1px 0 rgb(107,186,112),1px -1px 0 rgb(107,186,112);
    
}