JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="navbar">
    <div class="progress">
        <div class="value" style="width: 40%"></div>
    </div>
</div>
<div class="navbar dark">
    <div class="progress">
        <div class="value" style="width: 60%"></div>
    </div>
</div>

CSS

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

.navbar {
    height: 40px;
    
    background-color: #FFF;
    
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(0,0,0,0.1)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
    background-image: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a000000',GradientType=0 );
}

.navbar.dark  { background-color: #363636 }
.navbar.light { background-color: #FFFFFF }

.progress {
    position: relative;
    width: 90%; max-width: 600px;
    height: 20px;
    top: 10px;
    margin: 0 auto;
    
    background-color: #ccc;
    background-color: rgba(0,0,0,0.16);
    
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(255,255,255,0.1)));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000',...