JSFiddle - React, Tailwind, and code Playground

by Emil Hemdal

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<html>
    <body>
        <div id="constrained_div">
            <div id="dialog" title="I'm the dialog!">Yay!</div>
        </div>
        <button id="button">Click Me!</button>
    </body>
</html>

CSS

/* NOTICE that the jquery-ui.css is loaded in the added resources from jquery-ui's website! */

#constrained_div {
    width: 500px;
    height: 500px;
}

JavaScript

$().ready(function() {
    $("button").button();
    $("#dialog").dialog({
        autoOpen: false
    }).parent().draggable({
        containment: '#constrained_div',
        opacity: 0.70
    });
    
    $("#button").click(function(event) {
        $("#dialog").dialog("open")
    });
});