JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="aui-panels">
    <section class="aui-panel">
        <div class="aui-panel-head">panel 1</div>
    </section>
    <section class="aui-panel">
        <div class="aui-panel-head">panel 2</div>
    </section>
    <section class="aui-panel">
        <div class="aui-panel-head">panel 2</div>
    </section>
</div>
<div class="aui-panels">
    <section class="aui-panel">
        <div class="aui-panel-head">panel 3</div>
    </section>
    <section class="aui-panel">
        <div class="aui-panel-head">panel 4</div>
    </section>
</div>

CSS

html, body {
    height:100%;
    margin:0;
    overflow: hidden;
}
div.aui-panels{
    background: gainsboro;
    position: relative;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
//    border: 2px red solid;
    float: left;
}
section.aui-panel{
    border: solid 1px gray;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 2px;
    border-radius: 1px;
    overflow: hidden;
    background: gainsboro;
}
div.aui-panel-head{
    background: gray;
    cursor: move;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
}
section.aui-placeholder{
    border: dashed 2px gray;
    box-sizing: border-box;
}

JavaScript

$('.aui-panels').sortable({
    connectWith:'div.aui-panels',
	handle:'div.aui-panel-head',
    tolerance:'pointer',
    placeholder:'aui-placeholder',
    forcePlaceholderSize: true
});
$('.aui-panels').disableSelection();