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.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="dialog" title="Basic dialog">

  <p>This is an animated dialog which is useful for displaying...</p>

  <input type="text" name="qwe" id="qwe" class="text ui-widget-content ui-corner-all" />
</div>

  <button id="opener">Open Dialog</button>
</body>
</html>

JavaScript

$(function() {
        $("#qwe").datepicker();
        $("#opener").button().click(function() {
                $("#dialog").dialog("open");
        });
  
        $("#dialog:ui-dialog").dialog("destroy");
    
        $("#dialog").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true
        });

});