JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>

<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>foo</p>
<p>bar</p>
<p>baz</p>



<p><a id="opener" href="#">Open dialog</a></p>

<div id="dialog">
    <p>Dialog contents.</p>
</div>

</body>
</html>

JavaScript

$("#dialog").dialog({ autoOpen: false });
$("#opener").on("click", function() {
    $("#dialog").dialog("open");
});