JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
            <div class="voting-progress-bar">
                <!-- Set the CSS width Percentage for the value to paint the graph-->
                <span class="value"></span>
            </div>
    </body>
    
</html>

CSS

.voting-progress-bar {
    float: left;
    height: 16px;
    width: 150px;
    border: 1px solid #283136;
    border-radius: 5px;
    margin-top:3px;
}

.value {
    border: 1px solid red;        
    display: block;
    float: left;
    height: 96%;
    width: 60%;
    background-color: red;
    -webkit-animation: width 0.5s ease-in-out;
       -moz-animation: width 0.5s ease-in-out;
        -ms-animation: width 0.5s ease-in-out;
         -o-animation: width 0.5s ease-in-out;
            animation: width 0.5s ease-in-out;
}

@-webkit-keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}

@-moz-keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}

@-ms-keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}

@-o-keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}

@keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}