JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Using  jQuery 1.9.1 and jQuery UI 1.10.3
  
    <div id="tabs">
      <ul>
        <li><a href="#tab1">[0] #tab1</a></li>
        <li><a href="#tab2">[1] #tab2</a></li>
        <li><a href="#tab3">[2] #tab3</a></li>
        <li><a href="#tab4">[3] #tab4</a></li>
      </ul>	
      <div id="tab1">

        <div id="Atabs">
          <ul>
            <li><a href="#Atab1">[0] #Atab1</a></li>
            <li><a href="#Atab2">[1] #Atab2</a></li>
            <li><a href="#Atab3">[2] #Atab3</a></li>
            <li><a href="#Atab4">[3] #Atab4</a></li>
          </ul>	
          <div id="Atab1">ATab 1 Content</div>
          <div id="Atab2">ATab 2 Content</div>
          <div id="Atab3">ATab 3 Content</div>
          <div id="Atab4">ATab 4 Content</div>
        </div>
        <button id="btnATab1">See tab A 0</button>
        <button id="btnATab2">See tab 'Atab2'</button>  
        <button id="btnATab3">See tab 'Atab3'</button>  
        <button id="btnATab4">See tab 'tAab4'</button>  
      
      </div>
      <div id="tab2">Tab 2 Content</div>
      <div id="tab3">Tab 3 Content</div>
      <div id="tab4">Tab 4 Content</div>
    </div>
    <button id="btnTab1">See tab 0</button>
    <button id="btnTab2">See tab 'tab2'</button>  
    <button id="btnTab3">See tab 'tab3'</button>  
    <button id="btnTab4">See tab 'tab4'</button>

CSS

button, .ui-tabs{font-size:11px}

JavaScript

$(document).ready(function(){
    
    $.fn.tabIndex = function () {
        return $(this).parent().find(this).index() - 1; 
    };
    $.fn.selectTabByID = function (tabID) {
        $(this).tabs("option", "active", $('#' + tabID).tabIndex());
    };
    $.fn.selectTabByIndex = function (tabIndex) {
        $(this).tabs("option", "active", tabIndex);
    };
         
    $("#tabs").tabs();
    $("#Atabs").tabs();
    
    $('#btnTab1').click( function(){
        $("#tabs").selectTabByIndex(0);
    });
    $('#btnTab2').click( function(){
        $("#tabs").selectTabByID('tab2');
    });
    $('#btnTab3').click( function(){
        $("#tabs").selectTabByID('tab3');
    });
    $('#btnTab4').click( function(){
        $("#tabs").selectTabByID('tab4');
    });

    $('#btnATab1').click( function(){
        $("#Atabs").selectTabByIndex(0);
    });
    $('#btnATab2').click( function(){
        $("#Atabs").selectTabByID('Atab2');
    });
    $('#btnATab3').click( function(){
        $("#Atabs").selectTabByID('Atab3');
    });
    $('#btnATab4').click( function(){
        $("#Atabs").selectTabByID('Atab4');
    });


});