JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
    <a href="#" id="lightbox_button">
        <div class="button">button</div>
    </a>
        
    <div id="lightbox_panel">
        
        <h1>lightbox panel</h1>
    
        <a href="#" id="close_lightbox">
            <div class="button">close</div>
        </a>
    
    </div>
    
</div>

<div id="lightbox"></div>

CSS

#lightbox_panel 
{ 
    position: relative;
    z-index: 99; 
    width: 500px;
    height: 100px; 
    margin: 30px auto 0;
    background-color: #CCC;
    display: none;
    padding: 10px;
}

#lightbox 
{ 
    z-index: 90;
    position: absolute;
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
}

#close_lightbox 
{
    
}

.button 
{ 
    position: absolute;
    text-decoration: none; 
    padding: 2px 10px; 
    border: 1px solid #000;
    display: inline-block; 
    bottom: 10px;
    left: 50%;
}

JavaScript

$(document).ready(function() {

    $('#lightbox_button').click(function() {
        $('#lightbox').fadeIn('slow');
        $('#lightbox_panel').fadeIn('slow');
    });

    $('#close_lightbox').click(function() {
        $('#lightbox').fadeOut('slow');
        $('#lightbox_panel').fadeOut('slow');
    });

});