JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-wrap"> <a href="#" title="Login of registreer" id="login-link"><span>∧</span> Login or register</a> 
    <div id="custom-login">
        <div>
             <h2>Login</h2>

            <form name="loginform" id="loginform">
                <p class="login-username">
                    <label for="user_login">Username</label>
                    <input type="text" name="log" id="user_login" class="input" value="" size="20">
                </p>
                <p class="login-password">
                    <label for="user_pass">Password</label>
                    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
                </p>
                <p class="login-remember">
                    <label>
                        <input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked">Remember Me</label>
                </p>
                <p class="login-submit">
                    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login →">
                    <input type="hidden" name="redirect_to">
                </p>
            </form>
        </div>
    </div>
</div>

CSS

div#custom-login {
	display: none;
	width: 320px;
	position: absolute;
	z-index: 40;
	background: white;
	padding: 0 0.8em;
	box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 25px 3px rgba(0,0,0,0.1);
	border-radius: 3px;
	top: 2.7em;
    border: 1px solid #aaa;
}

JavaScript

$j = jQuery.noConflict();

$j("a#login-link").click(function (e) {
    $j("div#custom-login").slideToggle("fast");
    e.preventDefault();
    e.stopImmediatePropagation();
});

$j(document).click(function (e) {
    if ($j("div#custom-login").is(":visible") && $("div#custom-login").is(e.target)) {
        $j("div#custom-login").slideUp("fast");
    }
});

$j("div#custom-login").click(function (e) {
    e.stopPropagation();    
});