JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="menu-item">
        <p>login</p>        
        <div class="login-layer">
            <form>
                <input type="text" placeholder="E-Mail" id="email" name="login" class="EMAIL"/><br/>
            </form>
        </div>
    </li>
</ul>

CSS

li{
    padding-left: 0;
    float:left;
    width:100px;
    list-style: none;
}

ul li.menu-item .login-layer{
    display:none;
    width:100px;
    height:100px;
    border:1px solid #000;
}

ul li.menu-item.hover .login-layer{
    display:block;
}

input{
    width:100px;
}

JavaScript

$(document).on("mouseenter", "li.menu-item", function() {
    $(this).addClass("hover");
}).on("mouseleave",  "li.menu-item", function() {
    $(this).removeClass("hover");
});