JSFiddle - React, Tailwind, and code Playground

HTML

<div id="barra"><div id="progreso"></div></div>

CSS

#barra { margin:50px auto; width:500px; height:40px; background-color:#ddd; padding:0px; border:2px solid black; }
#barra:hover { background-color:#bbb; }
#progreso { margin:0px; width:0px; height:100%; background-color:green; }

JavaScript

window.onload=function(){
    var barra=document.getElementById("barra");
    var progreso=document.getElementById("progreso");
    barra.onclick=function(e){
        progreso.style.width=(e.clientX-this.offsetLeft)+"px";
    };
};