JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

<div class="overlay" style="display:none;"></div>

CSS

body {
    font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
    font-size: 62.5%;
}

.overlay { background-color:rgba(0,0,0,0.5); position:fixed; width:100%; height:100%; top:0; left:0; }

JavaScript

$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
    position: { my: "center top", at: "center top+50", of: window },
show: {
effect: "drop",
duration: 1200,
    easing:"easeOutExpo",
    direction:"up", 
    distance:300, 
},
hide: {
effect: "drop",
duration: 1000,
    easing:"easeInExpo",
    direction:"up", 
    distance:300, 
},
    beforeClose: function( event, ui ) {
        $( ".overlay" ).hide();
    }
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
    $( ".overlay" ).show();
});
});