JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">
<span class="hideButton">Hide</span>
<span class="showButton">Show</span>
<div class="hideable">
    Text in Hideable DIV
</div>

<div class="forDialog">
    Dialog content
    <input type="text" />
</div>

CSS

.ui-widget-overlay {
    top: 80px;
}

.hideable {
    border: 1px solid grey;
    padding: 4px;
    margin: 4px;
}

.hideButton, .showButton {
    background-color: lightblue;
    padding: 2px;
    display: inline-block;
    cursor: pointer;
}

JavaScript

$('.forDialog').dialog({
    appendTo: '.hideable',
    modal: true
});


$('.hideButton').click(function() {
    $('.hideable').hide();
});

$('.showButton').click(function() {
    $('.hideable').show();
});