JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div id="dialog" style="display:none">
    <div>This is my dialog</div>
</div>
<div>1. Click randomly in the following controls, and watch the Log:</div>
<div>
    <input type="text"/>
    <input type="password"/>
    <textarea rows="1"></textarea>
    <select><option/></select>
    <button>Button</button>
</div>
<div>
    <span>2. Click this button to open the dialog, then close the dialog: </span>
    <input type="button" id="showDialog" value="Show Dialog"/>
</div>
<div>3. Go back and repeat step 1. Nothing further is added to the Log.</div>
<div>
    Log:<br>
    <textarea id="log" style="height:300px"></textarea>
</div>

CSS

*
{
    font:12px Arial;
}

input, button, textarea
{
    vertical-align:top;
}

div
{
    margin-top:10px;
}

JavaScript

$("#showDialog").on("click", function() { $("#dialog").dialog({ modal: true }) });
$(document).on("focusin", function(e) { $("#log").val($("#log").val() + e.target.nodeName + "\n") });