JSFiddle - React, Tailwind, and code Playground

HTML

<body>77%&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="status"></label>
    <br>
    <br>100%&nbsp;&nbsp;
    <label class="status2"></label>
    <br>
    <br>33%&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="status3"></label>
    <br>
    <br>69%&nbsp;&nbsp;&nbsp;&nbsp;
    <label class="status4"></label>
    <br>
    <br>

CSS

label {
    display: inline-block;
}
.status{
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bba70', endColorstr='#9b2d39',GradientType=1 );
                width: 385.0px;
                height: 5px;
                border: thin black solid;
            }
            .status2{
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bba70', endColorstr='#a90329',GradientType=1 );
                width: 500px;
                height: 5px;
                border: thin black solid;
            }
            .status3{
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bba70', endColorstr='#7f7e59',GradientType=1 );
                width: 165.0px;
                height: 5px;
                border: thin black solid;
            }
            .status4{
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bba70', endColorstr='#963c3f',GradientType=1 );
                width: 345.0px;
                height: 5px;
                border: thin black solid;
            }