JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-progress-bar">
    <span class="ui-progress" style="width: 20%">
        <label class="ui-label">20%</label>
    </span>
</div>

CSS

.ui-progress-bar {
  position: relative;
  width: 211px;
  height: 13px;
  border-radius: 6px;
  background-color: transparent;
  box-shadow: inset 0px 2px 6px rgb( 238, 238, 238 );
  border: 1px solid rgb( 238, 238, 238 );
}

.ui-progress {
  display: block;
  width: 42px;
  height: 100%;
  border-radius: 6px;
  background-image: -moz-linear-gradient( 90deg, rgb(40,191,20) 0%, rgb(139,218,26) 14%, rgb(40,191,20) 49%, rgb(171,255,88) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(40,191,20) 0%, rgb(139,218,26) 14%, rgb(40,191,20) 49%, rgb(171,255,88) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(40,191,20) 0%, rgb(139,218,26) 14%, rgb(40,191,20) 49%, rgb(171,255,88) 100%);  
}

.ui-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    overflow:hidden;  
    width:100%;
    height: 100%;
    font-size: 9px;
    font-family: "Verdana";
    color: rgb( 0, 0, 0 );
    text-align: center;
    text-shadow: 0px 1px 0px rgb( 255, 255, 255 );
}

JavaScript

/* @author: Denis Baskovsky
   @name: progress bar without javascript
 */