JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Dialog - Modal confirmation</title> 
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> 
    <script src="http://jqueryui.com/jquery-1.5.1.js"></script> 
    <script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.button.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.position.js"></script> 
    <script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script> 
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"> 

</head> 
<body> 
 
<a class="testy">Show/Hide dialog</a>

 
  <div id="dialog-confirm" title="Can you confirm?" style="display: none;"> 
    <div class="dialog-text"><p>dialog text goes here</p> </div>
  </div> 

 
</body> 
</html>

JavaScript

$(function() {
    
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $("#dialog:ui-dialog").dialog("destroy");

    $(".testy").click(function() { //name of the class on the link for Show/hide dia
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            open: function() {
                $(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");
            },
            buttons: {
                "Okay": function() {
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
    });
    
});