JSFiddle - React, Tailwind, and code Playground

HTML

<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;
}
#signup #window {
    color:#fff;
    background:#1b1b1b;
    width:400px;
    border-radius:4px;
    margin:150px auto;
    border-top:2px solid #f65a5b;
    padding:10px
}

JavaScript

$(document).keyup(function (e) {
    if (e.keyCode == 27) {
        removeMessage();
    }
}).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);
}