JSFiddle - React, Tailwind, and code Playground

by hh54188

HTML

<div class="header"></div>
        <div class="wrapper">
            <div class="wrapper-left container">
                <div class="viewport">
                    <div class="portlet">id-1</div>
                    <div class="portlet">id-2</div>
                    <div class="portlet">id-3</div>                    
                </div>
            </div>
            <div class="wrapper-right container">
                <div class="viewport">
                    <div class="portlet">id-4</div>
                    <div class="portlet">id-5</div>
                    <div class="portlet">id-6</div>
                </div>
            </div>                               
        </div>

CSS

*{ margin:0; padding:0;}
        .header{ background:gray; height:140px; width:100%;}
        .wrapper{background:black;position:fixed;top:140px;float:left;height:100%;width:100%;min-width:800px;overflow:auto;}
        .viewport{ width:100%; height:100%;}
        .container{ margin:0 20px; position:absolute;top:0;height:100%;width:280px;overflow:hidden;}
        
        .wrapper-left{background:yellow;left:0;}
        .wrapper-right{background:blue;right:0;}
        .portlet{ color:White; float:left; background:red;margin: 0 10px 10px 0; width:250px;height:300px;}

JavaScript

$(".viewport").sortable({
                connectWith: '.viewport',
                revert: true
            });