JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" name="popup" id="popup" value="Sign up">

<div id="signup">
    <div id="window">
        Text
    </div>
</div>

CSS

#signup{width:100%;height:100%;background:rgba(0,0,0,.6);position:absolute;z-index:10;display:none;}
#signup #window{color:#fff;background:#1b1b1b;width:400px;border-radius:4px;margin:150px auto;border-top:2px solid #f65a5b;padding:10px}

JavaScript

$("#popup").add("#signup_signin a").click(function() {
    $("#signup").fadeIn(400);
    $("#window").slideDown(450);
});

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#signup").fadeOut(250);
        $("#window").slideUp(450);
    }
}).click(function (e) {
    e.stopPropagation();
    if ($(e.target).closest('#window').length == 0 || $(e.target).prop('id') != 'window') {
        removeMessage();
    }
});

function removeMessage() {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
}