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">Tab 1 Content</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">Select tab 0 (zero based)</button>
<button id="btnTab2">Select tab id 'tab2'</button>  
<button id="btnTab3">Select tab id 'tab3'</button>  
<button id="btnTab4">Select tab id '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();
    
    $('#btnTab1').click( function(){
        $("#tabs").selectTabByIndex(0);
    });
    $('#btnTab2').click( function(){
        $("#tabs").selectTabByID('tab2');
    });
    $('#btnTab3').click( function(){
        $("#tabs").selectTabByID('tab3');
    });
    $('#btnTab4').click( function(){
        $("#tabs").selectTabByID('tab4');
    });
});