JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main" class="row">
			<div id="block"></div>
	<li class="current"><a href="#">Главная</a></li>
    <li><a href="#">Проекты</a></li>
    <li><a href="#">Партнеры</a></li>
    <li><a href="#">Контакты</a></li>		
</ul>

CSS

ul{
    list-style: none;
}

.row::after 
{
	
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	

	clear: both; 

}

ul#main
{
	color: #4d7b87;
	font-size: 14px;
	position: relative;
    padding-bottom: 30px;
}


ul#main li
{
	float: left;
	
	margin-left: 30px;
	/*padding-left: 30px;
	border-top: 6px solid transparent;
	*/
	padding-top: 26px;
	
}

ul#main li:hover
{
	color: #325058;
}

ul#main li:first-child
{
	margin-left: 0;
}

#block
{
	background-color: #1f987d;
	width: 20px;
	height: 6px;
	position: absolute;
	display: none;
    bottom: 10px;
}

JavaScript

function set_block(left, width)
{
	jQuery("#block").animate({
		left: left + "px", 
		width: width + "px"}, 
		200);
}

jQuery(function()
{
	jQuery("ul#main li").hover(function()
	{
		var $this = jQuery(this);
		var dest = $this.position().left + 30;
		var wid = $this.width();
		set_block(dest, wid);
	},
	function()
	{

	});
	
	// возвращаемся на пункт по умолчанию только при выходе из ul
	jQuery("ul#main").on("mouseleave", function()
	{
        jQuery("#block").stop(true);
		set_block(current_left, current_width);
	});
});

jQuery(window).load(function()
{
	// по умолчанию
	current_left = jQuery("ul#main li.current").position().left + 30;
	current_width = jQuery("ul#main li.current").width();

	// переносим на активный пункт без анимации
	jQuery("#block").css({width: current_width+"px", left: current_left+"px", display: "block"});
});