JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/overcast/jquery-ui.css">
<div id="content">
<span>Click here for the modal:<button id="openModal">Open</button></span>
<br/>
<span>Results:<input id="theResults" type="text" />
</div>

JavaScript

$(document).ready(function() {
    $("#openModal").click(function(e) {
        e.preventDefault();
        openDialog();
    });
});
    
    function openDialog() {
        var theDialog = $("<div id='msg'>");
        theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");
        $(theDialog).dialog({
            title: "Sample Dialog",
            modal: true,
            buttons: { "Cancel": function() { 
                                $(this).dialog("destroy"); 
                                $("#msg").remove(); 
                            },
                       "Save": function() { 
                               $("#theResults").empty();
                               $("#theResults").val($("#txtVal").val());
                               $(this).dialog("destroy"); 
                               $("#msg").remove();
                           }
                     }
        });
    }