JSFiddle - React, Tailwind, and code Playground

HTML

<div id='tabs'>
    <ul>
        <li><a href='#tabs-1'>tab1</a></li>
        <li><a href='#tabs-2'>tab2</a></li>
        <li><a href='#tabs-3'>tab3</a></li>
        <li><a href='#tabs-4'>tab4</a></li>
    </ul>

    <div id='tabs-1' class='lsdiv'>
        <ul class='lsshelf'>
            <li>column1
                <ul class='lscolumn'>
                    <li>window1
                        <ul class='lswindow'>
                            <li>link1</li>
                            <li>link2</li>
                        </ul>
                    </li>
                    <li>window2
                        <ul class='lswindow'>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>column2
                <ul class='lscolumn'>
                </ul>
            </li>
        </ul>
        <div class='clear'></div>
    </div>
    <div id='tabs-2' class='lsdiv'>
        <ul class='lsshelf'>
            <li>column 1
                <ul class='lscolumn'>
                </ul>
            </li>
        </ul>
    </div>
    <div id='tabs-3' class='lsdiv'>
        <ul class='lsshelf'>
            <li>column 1
                <ul class='lscolumn'>
                </ul>
            </li>
        </ul>
    </div>
    <div id='tabs-4' class='lsdiv'>
        <ul class='lsshelf'>
            <li>secreteagle waz here! =D
                <ul class='lscolumn'>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
}
ul {
    min-height: 20px;
    padding-left: 0;
}
ul li {
    list-style: none;
    min-height: 20px;
}
.lsplaceholder {
    border: 1px dotted green;
}
.lswindow {
    min-height: 20px;
}
.lsshelf li {
    float: left;
}
.lscolumn li {
    border: 1px solid red;
    width: 230px;
    float: none;
}
.lswindow li {
    border: none;
    padding-left: 10px;
}
.lsdiv {
    border: 1px dotted black;
}
.clear {
    clear: both;
}



/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt...

JavaScript

$(function() {
    $('.lsshelf').sortable( {
        connectWith: '.lsshelf',
        placeholder: 'lsplaceholder',
        cancel: '.lscolumn'
    });
    
    $('.lscolumn').sortable( {    
        connectWith: '.lscolumn',
        cancel: '.lswindow',
        placeholder: 'lsplaceholder'
    }).disableSelection();
    
    $('.lswindow').sortable( { 
        connectWith: '.lswindow',
        placeholder: 'lsplaceholder' 
    }).disableSelection();
    
    $("#tabs").tabs().find(".ui-tabs-nav").sortable();
    
    var $tabs = $('#tabs').tabs();
    
    var $tab_items = $("ul:first li",$tabs).droppable( {
        accept: "connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function(ev, ui) {
            var $item = $(this);
            var $list = $($item.find('a').attr('href')).find('.connectedSortable');

            ui.draggable.hide('slow', function() {
                $tabs.tabs('select', $tab_items.index($item));
                $(this).appendTo($list).show('slow');
            });
        }
    });
});