JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<div id="tabs">
    <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>
        <li><a href="#tabs_4">Tab 4</a></li>
        <li><a href="#tabs_5">Tab 5</a></li>
    </ul>
    <div id="tabs_1">
    
        <div id="#tabs2">
            <ul>
                <li><a href="#tabs2_1">Tab 1.1</a></li>
                <li><a href="#tabs2_2">Tab 1.2</a></li>
                <li><a href="#tabs2_3">Tab 1.3</a></li>
            </ul>
            <div id="tabs2_1">Tab 1.1</div>            
            <div id="tabs2_2">Tab 1.1</div>
            <div id="tabs2_3">Tab 1.1</div>
        </div>
        
    </div>
    <div id="tabs_2">Tab 2</div>
    <div id="tabs_3">Tab 3</div>
    <div id="tabs_4">Tab 4</div>
    <div id="tabs_5">Tab 5</div>
</div>

JavaScript

$("#tabs").tabs();
$("#tabs_1").tabs();
$("#tabs").bind('tabsshow', function(event, ui) { funcX(ui.index); });
  
function funcX(idx){
    alert('triggerd - index: ' + idx);
}