JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<div class="xprogress" style="width: 200px;">
        <div class="xprogerss-value" style="width:48%">
          <span class="xprogerss-label">48%</span>
          <div class="xprogerss-dynamic-value" style="width:20%">
        </div>
         
        </div>
 </div>

CSS

body { background: white; font:Arial, Helvetica, sans-serif; }
  .xprogress  { 
  height: 1.5em; 
  border: 1px solid #444; border-radius:4px; box-shadow: inset 0 5px 8px rgba(0,0,0,.1); 
  background: #f1f1f1;
  }
  .xprogerss-label { 
  position:absolute;
  color:white; text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
  display: inline-block; height: 100%;
  line-height:1.5em;
  }
  .xprogerss-value  {
     height: 100%; background: #337ab7; 
      text-align: center;
  }
  .xprogerss-dynamic-value  { 
   float: right; height: 100%; background: #63a0d4;
  
  }