JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id="dialog1">When closed, this dialog does not fire the close event due to the hide animation.</div>
<div id="dialog2">When closed, this dialog does fire the close event.</div>

JavaScript

$('#dialog1').dialog({
    title:"Dialog 1",
    show: { effect: 'drop', duration: 500, direction: 'up' },
    hide: { effect: 'drop', duration: 500, direction: 'up' },
    open: function (event, ui) {
        console.log("Dialog 1 Open Event Fired.");
    },
    close: function (event, ui) {
        console.log("Dialog 1 Close Event Fired.");
    }
});

$('#dialog2').dialog({
    title:"Dialog 2",
    show: "blind",
    hide: "explode",
    open: function (event, ui) {
        console.log("Dialog 2 Open Event Fired.");
    },
    close: function (event, ui) {
        console.log("Dialog 2 Close Event Fired.");
    }
});