JSFiddle - React, Tailwind, and code Playground

HTML

<p>Demonstrate JQUERY UI DIalog box.</p>
<br><br>
<div id="div1"  class="gen"  style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" class="gen"  style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" class="gen" style="width:80px;height:80px;background-color:blue;"></div>
    <br>
<div id="divDialog1"  style="width:80px;height:80px;background-color:blue;">testdivDialog</div>
        
 <div id="divDialog"  style="width:80px;height:80px;background-color:blue;"></div>

CSS

#sectiontohide {
padding:20px;
background:#f0f0f0;
width:400px;
}

JavaScript

$(function(){

        $("#divDialog").dialog({
                resizable: true,
                autoOpen:false,
                show: {
                        effect: "blind",
                        duration: 1000
                },
                hide: {
                        effect: "explode",
                        duration: 1000
                },
                modal: true,
                width:400,
                height:300,
                buttons: {
                        ok: function() {
                                $(this).dialog('close');
                        } //end cancel button
                }//end buttons

        });//end dialog

               $("#divDialog").html("<b>test123</b>");
                $("#divDialog").dialog('option','title','Display Example');
                $('#divDialog').dialog('open');


});