JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="hi" style="position: absolute; top: 100px; left: 800px;">Hi</div>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog2" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

JavaScript

var x = 800;
  var y = 100;
        /*$("#dialog").dialog({
            dialogClass: "contentDialog",
            width: 400,
            height: 100,
            position: { my: "left top", at: "left+" + x + " top+" + y, of: window, collision: "flip flip"}
        });*/ 
        
        $("#dialog2").dialog({
            dialogClass: "contentDialog",
            width: 400,
            height: 100,
            position: { my: "left top", at: "right bottom", of: $("#hi"), collision: "flip flip"}
        });