JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<button id="open-dialog">Display</button>
<div id="dialog" title="Watch me!">
    <p>I'm an animated dialog.</p>
    <p class="status"></p>
</div>
<span id="status"></span>

JavaScript

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
            $("#status").html("Dialog is Open.");
            $("#dialog .status").html("I'm now open.");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
            $("#status").html("Dialog is Closed.");
        });
    }
});
$( "#open-dialog" ).button().on( "click", function() {
    $("#dialog").dialog( "open" );
    $("#dialog .status").html("Saved!).delay(3000);
});