JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo">

<div id="tabs-outter">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 content.</p>
    </div>
    <div id="tabs-3">
        <p>
            <div id="tabs-inner">
                <ul>
                    <li><a href="#tabs-1">Tab A</a></li>
                    <li><a href="#tabs-2">Tab B</a></li>
                    <li><a href="#tabs-3">Tab C</a></li>
                </ul>
                <div id="tabs-1">
                    <p>Tab A content.</p>
                </div>
                <div id="tabs-2">
                    <p>Tab B content.</p>
                </div>
                <div id="tabs-3">
                    <p>Tab C content.</p>
                </div>
            </div>
        </p>
    </div>
</div>

</div>

JavaScript

$(document).ready(function() {
    $("#tabs-outter").tabs();
    $("#tabs-inner").tabs();
});