JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
</div>
<div class="account">


    <div id="accdropdown" class="modal_div">
    <form action="" method="post">

        <p>
        <label for="login-username">Username</label><br>
        <input type="text" name="user_name" tabindex="1" id="login-username">
        </p>
        <p>
        <label for="login-password">Password</label><br>
        <input type="password" name="password" tabindex="2" id="login-password">
        </p>
        <p class="right">
        <button type="submit" tabindex="3"><span>Log in</span></button>

        </p>

        </form>
        </div>
        <p>Login</p>
    </div>

CSS

#overlay{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#bada55;
    opacity:0.5;
}
.account {
    width: 100px;
    height: 78px;
    background: #939393;
    margin-right:100px;
    clear:both;
    float:right;
    cursor:pointer;
    position:relative; /*or u could use absolute... anything that lets z-index work*/
    z-index:2;
}

#accdropdown {
    position:absolute; 
    right:0;
    top:22px;
    display:none;
    overflow:hidden;
    z-index:10000;
    width:170px;
    padding:6px 8px 6px;
    border:1px solid #ccc;
    text-align:left;
    background:#e4e4e4 none no-repeat 0 0;
    }

JavaScript

$("#overlay").hide();
$(".account").click(function() {

        $(".account").addClass("expand");
        $("#accdropdown").slideToggle();
        $("#login-username").focus();   
        $("#overlay").show();
 
});

$("#overlay").click(function(){
        $(".account").removeClass('expand');
        $(".modal_div").slideUp();
    $("#overlay").hide();
});