JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jquery light-box</h1>

<a href="#" class="lightbox">open lightbox</a>

<div class="backdrop"></div>
<div class="box">
    <div class="close">X</div>this is the light box</div>

CSS

body {
    font-family: Helvetica, Arial;
}
.backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: .0;
    z-index: 50;
    display: none;
}
.box {
    position: absolute;
    top: 20%;
    left: 30%;
    width: 500px;
    height: 300px;
    background: #ffffff;
    z-index: 51;
    padding: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px #444444;
    display: none;
}
.close {
    float: right;
    margin-right: 6px;
    cursor: pointer;
}

JavaScript

$('body').on('click', '.lightbox', function (e) {
    e.preventDefault();
    $('.backdrop').animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
});

$('.close').click(close_box);
$(".backdrop").click(close_box);

function close_box() {
    $('.backdrop, .box').animate({
        'opacity': '.0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none');
    });
}

a = $('<a>').addClass('cu').attr('href', '#').append('<br>Click to Test.');
$('body').append(a);