JSFiddle - React, Tailwind, and code Playground

HTML

<a class="login" href="javascript://">ВХОД</a>

<div class="hidelogin">
    <form>
        <input type="text" value="" />
        <br>
        <input type="password" value="" />
        <br>
        <input type="submit" value="Войти">
    </form>
</div>

CSS

.hidelogin {
    position: absolute;
    width: 300px;
    height: 75px;
    background: #eee;
    text-align: center;
    padding: 10px;
    box-shadow: 0px 1px 2px #ccc;
    margin-top: -20px;
    display:none;
}
.hidelogin input {
    border: none;
    box-shadow: 1px 1px 3px #ddd;
}

JavaScript

$(document).ready(function () {
    $('.login').click(function () {
        setTimeout(function() {
            $('.hidelogin').fadeIn();
        }, 100);
    });
});

$(document).click(function (e) {
   if ($(e.target).closest(".hidelogin").length) return;
    $(".hidelogin").fadeOut();
    e.stopPropagation();
});