JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog Upgrade</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="screen" />
<script type="text/javascript">
<!--//<![CDATA[
	$(document).ready(function(){
		var $dialog = $("#dialog-form").dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"Test": function() {
					$( this ).dialog( "close" );
				},
			Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
		$dialog.parent().appendTo($("#form"));
	
		$("#open").click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
	});
//]]>-->
</script>
</head>

<body>
	<form id="form">
		test
	</form>
	<div id="dialog-form" title="Dialog Title">
		test
	</div>
	<button id="open">Open</button>
</body>
</html>