JSFiddle - React, Tailwind, and code Playground

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;
    position: relative;
}
        
.progress-bar span {
    display: block;
    float: right;
    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%');
			});			
});