JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a class="border" href="#">HOME</a></li>
    <li><a class="border" href="#">TOUR</a></li>
    <li><a class="border" href="#">CONTACTUS</a></li>
</ul>

CSS

ul{list-style-type:none;}

.border{text-decoration: none;display: inline-block;border-bottom: 2px solid #3399FF;margin-right: 39px; width: 0%;height:14px;text-align:left;}

JavaScript

$(document).ready(function(){
				
		$(".border").hover(function(){
			$(this).animate({ 
				
				'borderBottom' :'2px solid #3399FF',
				'width' :'46%' 
				
				
			}, 500 );
		});
		

		
   
		
	});