JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<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>

JavaScript

$("#dialog").dialog({
    drag: function() {
        $.data(this, 'dragged', true);
    },
    open: function() {
        $.data(this, 'dragged', false);        
    }
});
$(window).resize(function() {
    $(".ui-dialog-content").each(function() {
        if(!$.data(this, 'dragged'))
            $(this).dialog('option', 'position', 'center');
    });
});