JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay-me"><button>Overlay!</button></div>
<div id="destroy"><button>Destroy It!</button></div>

CSS

#destroy {
    z-index: 9001;
    position: relative;
}

button {
    font-weight: bold;
}

JavaScript

$('#overlay-me > button').click(function() {
    $('<div id="overlay"></div>')
        .prependTo('body')
        .css({
            backgroundColor: 'black',
            opacity: 0.3,
            top: 0,
            left: 0,
            bottom: 0,
            width: '100%',
            position: 'fixed',
            zIndex: 9000
        });
});

$('#destroy > button').click(function() {
    $('#overlay').remove();
});