JSFiddle - React, Tailwind, and code Playground

HTML

<div id="userbar" onMouseOver="registr_win()" onMouseOut="registr_win2()">
        
<form name="login" method="post" autocomplete="on">
    
    <label><span style="color:white;padding-left:5px;"/>E-m</span><span style="color:#1cbbbc;"/>ail:</span>
    <input name="email" type="text"size="13" style="margin-left:13px;"></input></label>
    
    <label><span style="color:white;padding-left:5px;"/>Пар</span><span style="color:#1cbbbc;"/>оль:</span>
    <input name="password" type="password" size="13"></input></label>
</form></div>

CSS

#userbar
{
    position:absolute;
    background-color:Black;
    width:206px;
    float:left;
    left:-180px;
    z-index:3;
    font-size:9pt;
    font-weight:Bold;
}

JavaScript

var go;  
var t;
var back;
function registr_win()
{
    back=document.getElementById('userbar');
    back.style.left=0;
    go=0;
} 
function registr_win2()
{
     
    go-=5;
    if(go >= -180)
    {
    back=document.getElementById('userbar');
    back.style.left=go;
    t=setTimeout(registr_win2,100)
    
    }
   else
{
    clearTimeout(t)
}
    
}