JSFiddle - React, Tailwind, and code Playground

HTML

<div class="login"> <span>Sign in</span>

    <div class="login_form">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" value="" />
        <label for="pass">Password:</label>
        <input type="password" id="pass" name="pass" value="" />
        <input type="submit" class="" value="Sign in" />
    </div>
</div>

CSS

.login {
    position: relative;
    height:60px;
    width:50px;
    margin:30px;
}
.login > span {
    cursor: pointer;
}
.login_form {
    box-shadow: 0 0 1px;
    padding:10px;
    position: absolute;
    left: 0px;
    top: 30px;
    z-index: 9999;
    display: none;
}

JavaScript

$('.login').on('mouseover', function () {
    $('.login_form', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.login_form', this).hide();
    }
});