JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar orange shine">
    <span style="width: 65%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar green glow">
    <span style="width: 55%"></span>
</div>
<p>Set above to:
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

CSS

body {
            background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=");
            width: 360px;
            margin: 0 auto;  
            font: 13px 'trebuchet MS',Arial,Helvetica;
        }
    
        h2, p {
            text-align: center;
            color: #fafafa;
            text-shadow: 0 1px 0 #111;    
        }
        
        a {
            color: #777;
        }

        /*---------------------------*/            
        
        .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:...

JavaScript

$('.quarter').click(function(){
    $(this).parent().prev().children('span').css('width','25%');
return false;
});
$('.half').click(function(){
    $(this).parent().prev().children('span').css('width','50%');
return false;
});
$('.three-quarters').click(function(){
    $(this).parent().prev().children('span').css('width','75%');
return false;
});
$('.full').click(function(){
    $(this).parent().prev().children('span').css('width','100%');
return false;
});