JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Welcome to this Website</h1>

<button class="open-overlay">Open Overlay</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus arcu, faucibus at faucibus ornare, sollicitudin sit amet massa. Phasellus convallis tempor pulvinar. Nunc posuere ante eu risus efficitur, ut euismod nibh aliquam. Quisque nec quam quis elit convallis tincidunt nec tempus tellus. Sed elementum ultricies turpis, et mollis eros congue laoreet. Quisque maximus nibh sit amet quam rutrum rutrum. Praesent in viverra augue. Praesent quis dolor orci.</p>
<p>Vivamus viverra non ante quis fermentum. Duis auctor nisi vitae sodales convallis. Sed eu lectus sit amet urna porta lobortis sed interdum nulla. Integer sagittis, sapien eget eleifend fringilla, metus odio imperdiet lacus, eu posuere tortor elit vel massa. Praesent porta sem ut sapien bibendum, non pretium augue hendrerit. Aenean pellentesque enim eget turpis aliquet ultrices. Proin placerat nunc risus, in ultricies risus sollicitudin vitae. Ut egestas ut justo porttitor lacinia. Suspendisse consequat lectus at consequat scelerisque. In dignissim felis ligula, in dictum augue placerat vitae. Curabitur vel urna elit. Vivamus massa nisl, posuere at diam ut, gravida posuere erat.</p>

<div class="hidden-overlay">
    <div class="overlay-content">
        <button class="close-overlay">Close</button>
        <p>Suspendisse consequat lectus at consequat scelerisque. In dignissim felis ligula, in dictum augue placerat vitae. Curabitur vel urna elit. Vivamus massa nisl, posuere at diam ut, gravida posuere erat.
        </p>
    </div>
</div>

CSS

p {
    margin: 10px 0 10px;
    padding: 0;
}
.hidden-overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    top: 0;
    left: 0;
    overflow: auto;
    display: none;
}
.hidden-overlay.open {
    display: block;
}
.overlay-content {
    position: relative;
    width: 80%;
    min-width: 300px;
    margin: 0 auto;
    background-color: rgb(255,255,255);
    padding: 10px 15px;
    top: 50px;
}
.overlay-content .close-overlay {
    position: absolute;
    top: -20px;
    right: 0;
    border: 0;
    background-color: #ccc;
    height: 20px;
    cursor: pointer;
    outline: none;
}

JavaScript

$(function(){
	var $overlay = $('.hidden-overlay');
    var $btnOpenOverlay = $('.open-overlay');
    var $btnCloseOverlay = $('.close-overlay');
    
	// Click handler to trigger the overlay
    $btnOpenOverlay.on('click', function(e){
    	$overlay.addClass('open');
    });
    
	// Click handler for clicking the "close" button
    $btnCloseOverlay.on('click', function(e){
    	$overlay.removeClass('open');
    });
    
    // Code that allows you to click the background to close the overlay
    // Applying click handlers to the entire overlay, but we have the ability to detect what element was actually clicked on, by using e.target.
    // Without the if statement checking to see what the user clicked on, clicking anywhere would close the overlay.
    $overlay.on('click', function(e){
        console.log(e.target);
    	var $clicked = $(e.target);
        if( $clicked.hasClass('hidden-overlay') ){
            $overlay.removeClass('open');
        }
    });

});