JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="options tabsOptions">
        <li>Tab</li>
       
</ul>
<div id="tabs" class="typo3-dyntabmenu" style="min-height:80px;">
    <div class="typo3-dyntabmenu-tabs">
        <table class="typo3-dyntabmenu" cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    
                    
                </tr>        
            </tbody>
        </table>
    </div>
    <div class="typo3-dyntabmenu-divs"></div>
    
</div>

CSS

.options {
    cursor: default;
    list-style-type: none;
    width: 310px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.options li {
    cursor: pointer;
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    color: #ff6a00;
    margin: 5px;
    padding: 5px;
    height: 22px;
}
.typo3-dyntabmenu {
    
    border: 1px solid #CCC;
    background: #F6F6F6;
    
}

JavaScript

$(document).ready(function() {
    $( document ).on( "click", ".typo3-dyntabmenu a", function() {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".c-tablayer").not(tab).css("display", "none");
        $(tab).fadeIn();
    });

    $('.options').sortable({
        revert: true,
        refreshPositions: true
    });



    $('#tabs').droppable({
        drop: function(event, ui) {
            var num_tabs = $("div#tabs div table tbody td").length + 1;
//var s = '<div>';
            $("div#tabs tr").append(
                    "<td><a href='#tab" + num_tabs + "'>" + ui.draggable.text() + "</a></td>");
            $("div#tabs div.typo3-dyntabmenu-divs").append(
                    "<div class='c-tablayer' id='tab" + num_tabs + "'>#" + num_tabs + "</div>");
           // $("div#tabs").refresh();

        }
    });


});