JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script src="https://raw.github.com/jsmarkus/jquery-ui-dialog-extra/master/jquery.dialog.extra.js"></script><meta charset=utf-8 />
    <script>
$(function(){
    $('#ex1').click(function(){
        var div = $('<div />').html('<h3>Hello!</h3> I can be minimized and maximized!')
        div.dialog(
            {
                canMinimize:true,
                canMaximize:true,
                title:'Dialog'
            })
    })
    $('#ex2').click(function(){
        var div = $('<div />').html('<h3>Hello!</h3> I can be minimized and maximized <b>programmatically</b>!')
        div.dialog({
                canMinimize:true,
                canMaximize:true,
                title:'Dialog',
                buttons:[
                    {
                        text:'Min',
                        click:function(){
                            div.dialog('restore') //need to restore if maximized before
                            div.dialog('minimize')
                        }
                    },
                    {
                        text:'Max',
                        click:function(){
                            div.dialog('maximize')
                        }
                    },
                    {
                        text:'Rest',
                        click:function(){
                            div.dialog('restore')
                        }
                    }
                ]
            })
    })
})
    
    </script>

<title>jQuery UI dialog extra demo</title>
</head>
<body>
  <button id="ex2">Click me</button>
</body>
</html>