JSFiddle - React, Tailwind, and code Playground

HTML

<a id="some-button" href="#">click me</a> 
<div id="overlay-back"></div> 
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>

CSS

html, body {
    width  : 100%;
    height : 100%;
}
#overlay-back { 
    position   : absolute; 
    top        : 0; 
    left       : 0; 
    width      : 100%; 
    height     : 100%; 
    background : #000; 
    opacity    : 0.6; 
    filter     : alpha(opacity=60); 
    z-index    : 5;
    display    : none;
} 
 
#overlay { 
    position : absolute; 
    top      : 0; 
    left     : 0; 
    width    : 100%; 
    height   : 100%; 
    z-index  : 10;
    display  : none;
}

JavaScript

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});