JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable">
<div id="menu" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ><span id="ui-id-1" class="ui-dialog-title">Basic dialog</span><button name="save_customer" id="save_customer">x</button>
</div>
<div id="box" style="background-color:blue;height:100px;display:hidden;"></div>
</div>
<p>click auf X</p>

JavaScript

$(document).ready(function(){ 
$('#box').hide().slideUp();
$("#save_customer").click(function(){
    $('#box').slideDown();
});
$("#box").mouseleave(function(){
     $(this).slideUp();

});

   $("#open_div").button();

   $("#open_div").button({
       icons: {primary: 'ui-icon-disk'}
   });

});