JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<body>
    <div id="overlay"></div>
    <div id="SignUpLink">Sign Up</div>
    <div id="SignUpScreen">You're signing up!</div>
</body>

CSS

#SignUpLink{
    background:green;
    width:300px;
    height:300px;
}

#SignUpScreen{
    background:blue;
    width:600px;
    height:600px;
    display:none;
    z-index:1;
    color:white;
}

#overlay{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, .50);
    display:none;
    z-index:2;
}

JavaScript

$(function() {
    var container = $('#SignUpScreen');
    
    
    $(document).mouseup(function (e) {
                
        if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.fadeOut(450);
            $('#overlay').fadeOut(450);
        }
        
 
    });
    
    
    $('#SignUpLink').click(function() {
        $('#SignUpScreen').fadeIn(450);
        $('#overlay').fadeIn(450);
    });
    
    
 });