JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
    </ul>
    <div id="tabs-1">
        One
    </div>
    <div id="tabs-2">
        Two
    </div>
    <div id="tabs-3">
        <!-- BEGIN: DRAG & DROP INTERFACE  -->
        <div class="toolbar">
            <div class="item">
                <div class="in">
                    Satu
                </div>
            </div>
            <div class="clear"></div>
        </div>
        
        <div class="sortable">
            <div class="target">
                <div class="clear"></div>
            </div>
        </div>        
        <!-- END: DRAG & DROP INTERFACE  -->
    </div>
</div>

CSS

#tabs ul{
    display: block;
    list-style: none;
    border-bottom: 1px #666 solid;
    height: 30px;
}

#tabs ul li{
    float: left; 
    margin-left: 10px;
}

#tabs ul li a{
    display: block;
    padding: 0px 10px;
    line-height: 30px;
    border-top: solid 1px #666;
    border-left: solid 1px #666;
    border-right: solid 1px #666;
    text-decoration: none;
}

.ui-tabs .ui-tabs-hide {
     display: none;
}

.ui-state-active{
    background: #666;
    color: #fff;
}

.ui-state-active a{
    color: #fff;    
}


/** DRAG & DROP INTERFACE **/

.toolbar{
    margin-top: 25px;
    float: left;
    width:120px;
    padding: 10px;
    background: #eee;
    margin-right: 20px;
    border-radius: 5px 5px;
}

.sortable{
    margin-top: 25px;
    float: left;
    width:240px;
    padding: 10px;
    background: #ccc;
    border-radius: 5px 5px;
}

.sortable .target{
    min-height: 200px;    
}

.item{
    width:120px;
    float: left;
    color: #fff;
    cursor: move;
}

.item .in{
    margin: 5px;
    padding: 5px;
    height: 30px;
    text-indent: -9999px;
    border-radius: 3px 3px;
    background: #655;
}

.sortable .item .in{
    height: 50px;
    border-radius: 3px 3px;
}

.ui-sortable-placeholder { 
    width: 98px;
    float: left;
    color: #fff;
    margin: 5px;
    padding: 5px;
    height: 48px;
    display: block !important;
    visibility: visible !important;
    background: #ddd;
    border: dashed 1px #000;
    border-radius: 3px 3px;
}

.clear{
    clear: both;
    display:none;
}

JavaScript

function initDnD(event, ui) {
    if(ui.index != 2)
        return;
    jQuery(".sortable .target").sortable({ opacity: 0.5 });
    jQuery(".sortable .item, .toolbar .item").disableSelection();
    jQuery(".toolbar .item").draggable({
        connectToSortable: ".sortable .target",
        helper: "clone",
        revert: "invalid"
    });
    jQuery('#tabs').unbind('tabsshow', initDnD);
}

jQuery(function() {
    jQuery("#tabs").tabs({ selected: 1 }).bind('tabsshow', initDnD);
});