JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Problem</a></li>
        <li><a href="#tabs-2">useless</a></li>
        <li><a href="#tabs-3">useless</a></li>
    </ul>
    <div id="tabs-1">
        <button id="thebutton" class="mybutton">Open Dialog</button>
    </div>
    <div id="tabs-2">
        <p>Some other content.</p>
    </div>
    <div id="tabs-3">
        <p>Some other content.</p>
    </div>
</div>
<div id="dialog"><h1>dialog</h1></div>

CSS

/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

$('#tabs').tabs();
$('#dialog').dialog({
    autoOpen: false,
    title: 'dialog',
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
});
$('.mybutton').button();
$('.mybutton').on('click', function() {
    $('#dialog').dialog('open');
});