JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="constrained_div">
            <div id="dialog" title="I'm the dialog!">Yay!</div>
        </div>
        <p>
        sdsdsdsdsd
        </p>
        <button id="button">Click Me!</button>
    </body>
</html>

CSS

/* We include the jquery-ui.css here to make sure it's used. */
@import "http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css";

#constrained_div {
    /* NOTICE avoid using margins since they screw up the true constraining div. */
    /* margin: 20px; */
    width: 500px;
    height: 250px;
    background: blue;
}

JavaScript

// Public Domain
// Feel free to use any of the JavaScript, HTML, and CSS for any commercial or private projects. No attribution required.
// I'm not responsible if you blow anything up with this code (or anything else you could possibly do with this code).

$().ready(function() { // When the document is ready run the code inside the brackets.
    $("button").button(); // Makes the button fancy (ie. jquery-ui styled)
    $("#dialog").dialog({ // Set the settings for the jquery-ui dialog here.
        autoOpen: false, // Don't open the dialog instantly. Let an event such as a button press open it. Optional.
        position: {my: "center", at: "center", of: "#constrained_div"} // Set the position to center of the div.
    }).parent().resizable({ // Settings that will execute when resized.
        containment: "#constrained_div" // Constrains the resizing to the div.
    }).draggable({ // Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled.
        containment: "#constrained_div", // The element the dialog is constrained to.
        opacity: 0.70 // Fancy opacity. Optional.
    });
    
    $("#button").click(function() { // When our fancy button is pressed the stuff inside the brackets will be executed.
        $("#dialog").dialog("open"); // Opens the dialog.
    });
});