JSFiddle - React, Tailwind, and code Playground

by Ankit G.

HTML

<div class="progress progress-lf">
    <div class="progress-bar gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:100%;"></div>
    <div class="void" style="width:40%;"></div>
    <span>60% Complete</span>
</div>

CSS

.progress-lf {
    position: relative;
    height: 31px;
    background-color: rgba(51, 51, 51, 0.4);
}

.progress-lf span {
    position: absolute;
    display: block;
    font-weight: bold;
    color: #d2d2d2;
    width: 100%;
    top:6px;
}
.progress-lf .void{
    position:absolute;
    height:100%;
    right:0px;
    background:rgba(51,51,51,0.4);
}
.progress-lf .gradient {
    position:absolute;
    height:100%;
    background-color: transparent;
    background-image: -ms-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -moz-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -o-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E34747), color-stop(100, #5FB365));
    background-image: -webkit-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: linear-gradient(to right, #E34747 0%, #5FB365 100%);
}