JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<a href="#" id="click">Click me</a>
  <div id="modal">This is modal</div>
  <div id="overlay">

CSS

#overlay {
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}
#modal {
    position: absolute;
    display: none;
    margin-left: auto;
    margin-right: auto;
      background-color:#FFF;
    color: #F00;
    z-index: 100;
}

JavaScript

$(document).ready(function () {
        $("#click").click(function() {
            $('#overlay').css({ 'display' : 'block', opacity : 0});
            $('#overlay').fadeTo(500,0.8);
            $('#modal').show();
        });
});