JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/cupertino/jquery-ui.css">
<div id="dialog-first" title="1st Modal">
    First Modal
    <input type="input" id="onetext"/>
</div>

<div id="dialog-second" title="2nd Modal">
    Second Modal
</div>

JavaScript

$( "#dialog-first" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$( "#dialog-second" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#onetext").dblclick(function() {
    $("#dialog-second").dialog("open");
});