JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<DIV class="ui-layout-center">Center     <P><A href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</A></P> 
    <P>* Pane-resizing is disabled because ui.draggable.js is not linked</P> 
    <P>* Pane-animation is disabled because ui.effects.js is not linked</P> 
    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight">Item 1</li>
        <li class="ui-state-highlight">Item 2</li>
        <li class="ui-state-highlight">Item 3</li>
        <li class="ui-state-highlight">Item 4</li>
        <li class="ui-state-highlight">Item 5</li>
    </ul>
</DIV> 
<DIV class="ui-layout-north">North
    
</DIV> 
<DIV class="ui-layout-south">South</DIV> 
<DIV class="ui-layout-east">East</DIV> 
<DIV class="ui-layout-west">West
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</DIV>

JavaScript

$('body').layout({
    applyDefaultStyles: true
});

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
}).disableSelection();