JSFiddle - React, Tailwind, and code Playground

HTML

<title>jQuery UI Tabs - Sortable</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script>
    $(function() {
        var tabs = $( "#tabs_1, #tabs_2" ).tabs();
        tabs.find( ".ui-tabs-nav" ).sortable({
            connectWith: '.ui-tabs-nav',
            receive: function (event, ui) {
                var receiver = $(this).parent();
                var sender = $(ui.sender[0]).parent();
                var tab = $(ui.item[0]);
                // Find the id of the associated panel
                var panelId = tab.attr( "aria-controls" );
                // Remove the panel
                $( "#" + panelId ).appendTo(receiver);
                tabs.tabs('refresh');
            },
            stop: function() {
                tabs.tabs( "refresh" );
            }
        });
    });
    </script>

 
<div id="tabs_1">
    <ul>
        <li><a href="#tabs_1-1">Nunc tincidunt</a></li>
        <li><a href="#tabs_1-2">Proin dolor</a></li>
        <li><a href="#tabs_1-3">Aenean lacinia</a></li>
    </ul>
   
</div>
 
 

</html>

CSS

.ui-tabs .ui-tabs-nav
{
background: none;
    border:none;
}

.ui-tabs .ui-tabs-panel /* just in case you want to change the panel */
{
background: blue;
}