JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="progress_bar blue stripes">     <!--stripes defines the animation type for      the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span>         <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>

CSS

.progress-bar {
 background-color: #1a1a1a;
 height: 25px;
 padding: 5px;
 width: 350px;
 margin: 50px 0;         
 border-radius: 5px;
 box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}

.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;    
}