JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar"></div>
<ul>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
</ul>

CSS

div, ul { float: left; }
div { width: 20px; height: 20px; background: #f00; }

ul { padding: 0; margin: 0; }

JavaScript

$("li").mouseenter(function(e) {
    height = $(this).height();
    //console.log(e);
    $("#bar").animate({ 
        height: ($(this).index()+1) * height
    });
})
$("ul").mouseleave( function() { 
    $("#bar").animate({
        height: 20
    });
});