JSFiddle - React, Tailwind, and code Playground

by Mils

HTML

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>

<p>
	<a href="#" class="three-quarters">75%</a> ||
	<a href="#" class="full">100%</a>
</p>

CSS

.progress-bar {
            background-color: #1a1a1a;
            height: 25px;
            padding: 5px;
            width: 350px;
            margin: 70px 0 20px 0;			
            -moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
			-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
			box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
        }
        
.progress-bar span {
            display: inline-block;
            height: 100%;
			background-color: #777;
            -moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			-webkit-transition: width .4s ease-in-out;
			-moz-transition: width .4s ease-in-out;
			-ms-transition: width .4s ease-in-out;
			-o-transition: width .4s ease-in-out;
			transition: width .4s ease-in-out;		
}
				
		
.blue span {
            background-color: #34c2e3;   
 }

JavaScript

$(document).ready(function(){ 
		$('.three-quarters').click(function(){
			$(this).parent().prev().children('span').css('width','75%');
			});
		$('.full').click(function(){
			$(this).parent().prev().children('span').css('width','100%');
			});			
});