JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 
   
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">a</a></li>
        <li><a href="#tabs-2">b</a></li>
        <li><a href="#tabs-3">c</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3</p>
    </div>
</div>
 
<p>Selected=<span id="tabsel"></span></p>

JavaScript

$(function() {
    
    // load up tabs
     var tabs = $('#tabs').tabs({
         select: function(event, ui) {
             $('#tabsel').html(ui.index);
         },
     });
     
     tabs.find( ".ui-tabs-nav" ).sortable({
         axis: "x",
         stop: function() {
             tabs.tabs( "refresh" );
         },
     });
     
     setInterval(function(){
         var selected = $('#tabs').tabs("option", "active"); 
          $('#tabsel').html(selected );
    },250);
});