JSFiddle - React, Tailwind, and code Playground

by jpraden

HTML

<span class="coolBar let-a"></span>  
<span class="coolBar let-b"></span>  
<span class="coolBar let-c"></span>

CSS

.coolBar {
    height: 20px;
    display: block;
    text-align: right;
    font-size: 14px;
    color: #FFF;
    margin-top:1px;
}
.coolBar:before {
    margin-right: 5px;
    margin-top: 3px;
    display: inline-block;
}
.coolBar:after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid transparent;
    height: 0;
    display: block;
    content: "";
    float: right;
    margin-right: -15px;
}
.coolBar.let-a {
    background: #017C35;
    width: 0;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
}
.coolBar.let-a:before {
    content: "A";
}
.coolBar.let-a:after {
    border-left-color: #017C35;
}
.coolBar.let-b {
    background: #05AA34;
    width: 0;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
}
.coolBar.let-b:before {
    content: "B";
}
.coolBar.let-b:after {
    border-left-color: #05AA34;
}
.coolBar.let-c {
    background: #99D013;
    width: 0;
    -webkit-transition: width .8s;
    -moz-transition: width .8s;
    -o-transition: width .8s;
    transition: width .8s;
}
.coolBar.let-c:before {
    content: "C";
}
.coolBar.let-c:after {
    border-left-color: #99D013;
}

JavaScript

$('.let-a').width(100);
$('.let-b').width(130);
$('.let-c').width(160);