JSFiddle - React, Tailwind, and code Playground

HTML

<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>
	</ul>
	<div id="tabs-1">
		First tab
	</div>
	<div id="tabs-2">
		Second tab
	</div>
	<div id="tabs-3">
		Third tab
	</div>
</div>
<div class='log'></div>

CSS

div.log div {
  padding: 5px;
  font-family: monospace;
  font-size: 17px;
}

JavaScript

$(function($) {
    $( "#tabs" ).tabs({
        active: 1,
        create: function(event, ui) {
            var newIndex = ui.tab.parent().children().index(ui.tab);
            $(".log").prepend("<div>Created fired for child=" + newIndex + "</div>");
        },
        activate: function(event, ui) {
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            $(".log").prepend("<div>Activate fired for child=" + newIndex + "</div>");
        },
      	beforeActivate: function (event, ui) {
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            $(".log").prepend("<div>Before activate fired for child=" + newIndex + "</div>");
      	}
    });
});