JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="overlay_1" class="white_content"><div class='close'>X</div></div>
     <div id="overlay_2" class="white_content"><div class='close'>X</div></div>
    <button id="one">Display Overlay 1</button>
    <button id="two">Display Overlay 2</button>
</body>

CSS

body {
    background: blue;
}

.white_content {
    background: #ECC41D;
    height: 150px;
    width: 150px;
    position: relative;
   
}

#overlay_1 {
     top: 40%;
    left: 40%;
}


#overlay_2
{
    top: 200px;
    left: 40%;
}
.close {
     height: 20px;
    width: 20px;
    float: right;
    cursor: pointer;
        
}

JavaScript

$(function() {

    $("body").click(function() {
        $(".white_content").each(function() {
            if($(this).attr("display") !== "none") $(this).hide();
        });
    });
    
    $("#one").click(function(e) {
        e.stopPropagation();
        $("#overlay_1").show();
    });
    
     $("#two").click(function(e) {
        e.stopPropagation();
        $("#overlay_2").show();
    });
    
    $(".close").click(function(e) {
        e.stopPropagation();
        $(this).parent().hide();
    });

});