JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http:////code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <button id="addtab">Add Tab</button>
  <div id="search-tabs" >
    <ul>
    </ul>
  </div>

CSS

#search-tabs > ul {
    min-height: 27px;
}
.ui-tabs .ui-tabs-nav li {
    height: 25px;
    font-size:12px;
}
div#search-tabs{
    height: 100vh;
}

JavaScript

$(function() {
  var tabs = $( "#search-tabs" ).tabs({
        heightStyle: "fill"
    });
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs("refresh");
        }
    });
    
    
    $('button#addtab').click(function(){
        var num_tabs = $("div#search-tabs ul li").length + 1;

        $("div#search-tabs ul").prepend(
            "<li><a href='#s-tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );

        $("div#search-tabs").append(
            "<div id='s-tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );

        $("#search-tabs").tabs("refresh");
});

    	jQuery('#search-tabs').tabs({
	  activate: function(event,ui) {
		alert('selected: '+ui.index);
	  }
	});	
});