JSFiddle - React, Tailwind, and code Playground

HTML

<ul >	    	
			<li id="a1" onmouseover="highlightMenu('a1')">Первый пункт</li>
	    	<li id="a2" onmouseover="highlightMenu('a2')">Второй пункт точка</li>
		    <li id="a3" onmouseover="highlightMenu('a3')">Третьий пункт точка и запятая</li>
		    <li id="a4" onmouseover="highlightMenu('a4')">Четвёртый пункт</li>
    	</ul>
	<div id="d1"></div>

CSS

ul{
			border:2px solid red;
			background:#CC9;
			width:650px;
		}
		li{
			display:inline-block;
			
		}
		#d1{
			position:absolute;
			background:red;
			left:15px;
			top:17px;
			width:135px;
			height:20px;
			opacity:0.5;
		}

JavaScript

function highlightMenu(id){	
	time = 0;
	var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;
		
	var rect = document.getElementById(id).getBoundingClientRect();
	var width = document.getElementById(id).offsetWidth;
	var idTop = rect.top;
	var idLeft = rect.left;		
	
	var rect1 = document.getElementById('d1').getBoundingClientRect();
	var shadowWidth = document.getElementById('d1').offsetWidth;
	var shadowLeft = rect1.left;
	var shadowTop = rect1.top;
	
	//moveShadow(shadowLeft,idLeft,8);
	if (shadowLeft < idLeft){
		for(i=shadowLeft,time=50;i<idLeft-3;i++,time+=5){
			setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);				
		}	
	}
					
	else{	
		for(i=shadowLeft,time=50;i>idLeft-3;i--,time+=5){
			setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);				
		}
	}		
//	alert("s");	
	//changeSize(shadowWidth,width,1);		
	if(shadowWidth < width){
		for(i=shadowWidth;i<width+10;i++, time+=0.01){
				setTimeout("document.getElementById('d1').style.width='"+i+"px'",time);								
		}
	}
	else{
		for(i=shadowWidth;i>width+10;i--, time+=0.01){
				setTimeout("document.getElementById('d1').style.width='"+i+"px'",time);								
			}
	}


	if(shadowLeft < idLeft){	
								
			for(i = idLeft+3;i<idLeft+20;i++,time+=25)
			{
				setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);
				
			}
			for(i = idLeft+20;i>idLeft-5;i--,time+=50)
			{
				setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);
				
			}
	}
	else{
			for(i = idLeft-3;i>idLeft-20;i--,time+=25)
			{
				setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);
				
			}
			for(i = idLeft-20;i<idLeft-5;i++,time+=50)
			{
				setTimeout("document.getElementById('d1').style.left='"+i+"px'",time);
				
			}

	}
}