JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress_bar_wrap">
     <div class="progress_bar">                            
          <div class="progress"></div>
      </div>
</div>

CSS

.progress_bar_wrap {
    border: 2px solid #2B1A1A;
    box-shadow: 0 1px 0 #634D4D;
    -moz-box-shadow: 0 1px 0 #634D4D;
    -webkit-box-shadow: 0 1px 0 #634D4D;
    border-radius: 50px;
    overflow: hidden;
    zoom: 7;
    }
    .progress_bar {
        height: 17px;
        width: 100%;
        
        background-color: #2aa195;
        background-image: -webkit-linear-gradient(left, #bacf35, #2aa195);
        background-image: -moz-linear-gradient(left, #bacf35, #2aa195);
        background-image: -ms-linear-gradient(left, #bacf35, #2aa195);
        background-image: -o-linear-gradient(left, #bacf35, #2aa195);
        background-image: linear-gradient(left, #bacf35, #2aa195);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bacf35',EndColorStr='#2aa195');
        
        box-shadow: 0 0 6px 0 #FFFFFF inset;
        -moz-box-shadow: 0 0 6px 0 #FFFFFF inset;
        -webkit-box-shadow: 0 0 6px 0 #FFFFFF inset;
        
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        }
        .progress_bar .progress {        
            height: 100%;
            width: 100%;
            background-color: #342020;
            float: right;
            }