JSFiddle - React, Tailwind, and code Playground

HTML

<p>Move mouse over progress bar :)</p>
<div id="progress-bar" onmousemove='myFunction(event)'>
    <div id ="progress"></div>     
</div>
<div id ="pct">0%</div>

<script>
function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var width= document.getElementById('progress-bar').offsetWidth;
    var pct = 0;    
    if(x >= 0 && x <= width) {
        pct =  x /(width * 0.01);
    }
   document.getElementById("progress").style.width = pct + "%";
   document.getElementById("pct").innerHTML = parseInt(pct) + "%";
}
</script>

CSS

#progress-bar,
#pct{
    display: inline;
    float: left;
    color: rgb(7, 215, 191);
  
}

#pct {
    margin-left: 100px;
    vertical-align: middle;
    height: 12px;
    line-height: 12px;
    font-size: small;
}

#progress-bar {
    width:600px;
    height:20px;
    background-color: rgb(219, 219, 219);
}

#progress{
    height: inherit;
    background-color: rgb(7, 215, 191);
    width: 0%;
}