JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<form>
<div id="dialog1"></div>
<div id="dialog2"></div>
<input id="favorite-animal" type="text" value="" name="asdasd"/>
<input id="favorite-animal2" type="text" value="" name="asdasd"/>
</form>

JavaScript

$( "#dialog1" ).dialog({ autoOpen: false, modal:true });
	$( "#dialog2" ).dialog({ autoOpen: false, modal:true, buttons: [ { text: "Ok", click: $.noop } ]  });

	$( "#dialog1" ).on( "dialogbeforeclose", function() {
		$( "#dialog2" ).dialog( "open" );

		setTimeout(function() {
			$( "#dialog2" ).dialog( "close" );
			setTimeout(function() {
				$( "#favorite-animal" ).focus();
				$( "#favorite-animal2" ).focusin();
				$( "#dialog1" ).dialog( "destroy" );
				$( "#dialog2" ).dialog( "destroy" );
			}, 200 );
		}, 200 );
	});

	setTimeout(function() {
		$( "#dialog1" ).dialog( "open" );

		setTimeout(function() {
			$( "#dialog1" ).dialog( "close" );
		}, 200);
	}, 200);