JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>    
    <li>Menu4</li>    
    <li>Menu5</li>        
</ul>    

<div id="marker"></div>

CSS

li { float: left; padding: 10px; width: 100px; border: 1px solid blue; text-align: center; }
li.active { border: 1px solid red; }
#marker { position: fixed; display: none; height: 3px; width: 120px; border-bottom: 1px solid black; }

JavaScript

$('li').click( function() { 
    $('.active').removeClass('active');
    $(this).addClass('active');
    var top = $(this).offset().top + $(this).height() + 10;
    var left = $(this).offset().left;
    $('#marker').stop().animate( { top: top, left: left  }, 400 );
});

$('li:first').trigger('mouseover');
$('#marker').fadeIn();