JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" &lt;link type=&quot;text/css&quot; href=&quot;http://www.asual.com/jquery/address/samples/subtabs/jquery-ui-1.8.13.custom.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<script src="&lt;link type=&quot;text/css&quot; href=&quot;http://www.asual.com/jquery/address/samples/subtabs/styles.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<script src="  &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.asual.com/jquery/address/samples/subtabs/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.asual.com/jquery/address/samples/subtabs/jquery-ui-1.8.13.custom.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.asual.com/jquery/address/samples/subtabs/jquery.address-1.5.min.js&quot;&gt;&lt;/script&gt;"></script>
<div class="page">
    <h1>jQuery Address SubTabs</h1>

    <div id="tabs">
      <ul>
        <li><a href="#tab1">Tab 1</a></li>

        <li><a href="#tab2">Tab 2</a></li>
      </ul>

      <div id="tab1">
        <p>Tab 1</p>

        <div id="subtabs">
          <ul>
            <li><a href="#tab1-subtab1">SubTab 1</a></li>

            <li><a href="#tab1-subtab2">SubTab 2</a></li>
          </ul>

          <div id="tab1-subtab1">
            <p>SubTab 1</p>
          </div>

          <div id="tab1-subtab2">
            <p>SubTab 2</p>
          </div>
        </div>
      </div> <!--end subtab1-->

      <div id="tab2">
        <p>Tab 2</p>

        <div id="subtabs">

        </div> <!--end subtab2-->
      </div> <!--end tab2-->
    </div> <!--end tabs-->
  </div> <!--end page-->

JavaScript

var tabs,
                separator = '-',
                initialTab = 'tab1',
                navSelector = 'ul.ui-tabs-nav a',
                tabSelector = '#tabs, #tab1 > #subtabs';

            $.address.wrap(true);

            if ($.address.value() == '/') {
                $.address.history(false).value(initialTab).history(true);
            }

            $.address.change(function(event) {

                // Selects the current anchor
                var current = $('a[href=#' + event.value.replace(/^\//, '').replace('/', separator) + ']:first'),
                    selection = current.attr('href'),
                    href = selection.replace('/', separator),
                    parts = href.split(separator),
                    subselection;
                
                // Sets the page title
                $.address.title($.address.title().split(' | ')[0] + ' | ' + current.text());

                if (!tabs) {
                    // Creates the tabs
                    tabs = $(tabSelector).tabs({
                        event: 'change'
                    }).css('display', 'block');
                    tabs.find(navSelector).click(function(e) {
                        $.address.value(e.target.hash.replace(/^#/, '').replace(separator, '/'));
                        e.preventDefault();
                    });
                }

                // Selects the parent tabs
                if (parts.length != 1) {
                    for (var i = 1; i < parts.length; i++) {
                        tabs.tabs('select', parts.slice(0, i).join(separator));
                    }
                }
                
                // Selects the chosen tab
                tabs.tabs('select', selection);

                // Selects the first child tab
                while (subselection = $(selection + ' ' + navSelector + ':first').attr('href')) {
                    tabs.tabs('select', subselection);
                    selection = subselection;
         ...