JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<p id="login">     
    <span class="label">Login Here</span>       
    <span id="loginForm">        
        <span class="form-elements">
            <span class="form-label">Name:</span>
            <span class="form-field"><input type="name" name="email_address"  id="email"/></span>                        </span>        
        <span class="form-elements">
            <span class="form-label">Password:</span>
            <span class="form-field"><input type="password" id="pass"/></span>                    </span>        
        <span class="form-elements">
            <span class="submit-btn"><input type="submit" value="Submit" /></span>     
        </span>
    
    </span>          
</p>
</form>

CSS

body { font-family: tahoma; }
#loginForm  {
    display: none;
    background: #ccc;
    width: 250px;
    height: 100px;
    padding: 20px;
    color: #333;
}
#login {
    width: 290px;
    display:block;
    background:#069;
    color:#fff;
}
.label {
   cursor: pointer; 
   display:block;
   padding: 5px 15px;
   font-size: 16px;
   font-weight: bold;    
}
.form-label {
    width: 70px;
    font-size: 12px;
    font-weight: bold; 
}
.form-field {
    width: 180px;
}

.form-elements {
    font-size: 0px;
    margin: 10px 0 0 0;
    display: block;
}

.form-label, .form-field {
    display: inline-block;
}

.form-field input {
    padding: 3px 5px;
}

.submit-btn input {
    margin-left: 70px;
}

JavaScript

$("#login").hover(function() {
    $("#loginForm").slideDown('500').css('display', 'block');
}, function() {
    if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
    $("#loginForm").slideUp('500')
});