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>


<script>
var go;  
var t;
var back;
function registr_win2()
{
    back=document.getElementById("userbar");
    back.style.left=-180;
    go=0;
} 
</script> 
  <script>  
    function registr_win()
{
var go2;  
var t;
var back2;
     
    go2 +=5;
    if(go2 > 0)
    {
    back2=document.getElementById("userbar");
    back2.style.left=go2;
    t=setTimeout(registr_win2,100)
    
    }
   else
{
    clearTimeout(t)
}
    
}
</script>

CSS

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