JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ui-tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
 <div id="tabs-1">Tab1 content </div>
 <div id="tabs-2">Tab2 content </div>
 <div id="tabs-3">Tab3 content </div>
</div>

<button id="prev" value="-1">Previous tab</button>
<button id="next" value="1">Next tab</button>

JavaScript

$('#ui-tabs').tabs();

     function GetSelectedTabIndex() {
            return $('#ui-tabs').tabs('option', 'selected');
        }
    
    function ShowTabs(stepNum) {
        var num = parseInt(stepNum);
        $('#ui-tabs').tabs('option', 'active', parseInt(GetSelectedTabIndex()) + num);
    }

$('#prev, #next').click(function(){
  ShowTabs(this.value)  ;
})

alert(GetSelectedTabIndex())