JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
  .active {
    color: red;
  }
</style>
</head>
<body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<script type = 'text/javascript'>
  var aLi = document.getElementsByTagName('li');
  var oIinfo = document.getElementsByTagName('p')[0];
  for(i=0;i<aLi.length;i++){
    aLi[i].index = i;
    aLi[i].onmouseover = function(){
      for(j=0;j<aLi.length;j++){
        if(j<=this.index){
          aLi[j].className = 'active';
        }else{
          aLi[j].className = null;
        }
      }
    }
  }
</script>
</body>
</html>