JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>

<div class="tabs">
    <ul>
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
    </ul>
    <div id="first">
        <p>Text in first tab.</p>
    </div>
    <div id="second">
        <p>Text in second tab.</p>
    </div>
</div>

<div class="forDialog" title="Dialog Title">
    Dialog content
</div>

CSS

/* make overlay cover tab content only */
#first {
    position: relative; 
}
#first .ui-widget-overlay {
    position: absolute;
}

JavaScript

$('.tabs').tabs();

$('.forDialog').dialog({
    appendTo: '#first', // necessary for error
    modal: true // necessary for error
});

// Error when switching from second tab back to first (when dialog is still open).