JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#dialog" name="modal">Link</a>
<div id="boxes">
    <div id="dialog" class="window">
    <font size="6px">Hello World</font><br>      
    </div>
    <div id="mask"></div>
</div>

CSS

#back {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    font-family: Georgia;
    }
#boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:440px;
    border: 3px solid #078E18;
    box-shadow: 0 0 7px 1px #666;
    border-radius: 10px;    
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    text-align: center;
    font-size: 23px;
    }
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    font-family: Georgia;
    }
#boxes #dialog {
    width:375px;
    height:203px;
    padding:10px;
    background-color:#E4F2FA;
    }

JavaScript

$(document).ready(function() {
        $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
    });
});