JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>

CSS

div {
    display: inline-block;
    float:left;
}

#red {
    background-color:#FF0000;
    height:100px;
    width:100px;
}

#blue {
    background-color:#0000FF;
    height:100px;
    width:200px;
}

#yellow {
    background-color:#E2BE22;
    height:100px;
    width:50px;
}

#green {
    background-color:#008800;
    height:100px;
    width:170px;
}
#slider{
    background-color:#6FF;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

$(document).ready(function(){
      $("#slider").animate({
          "left": $(".item:first").position().left + "px",
          "width": $(".item:first").width() + "px"
        }, 0);
    
    $(".item").hover(function(){
       $("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);
    });
    
    $(".item").on( "mouseout",function(){
       $("#slider").stop();           $("#slider").animate({"left":$('#red').position().left+"px","width":$('#red').width()+"px"},500);
    });
});