JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-jq.js"></script>
<body>
  <div class="container">
    <div class="side-grid-container">
      <div id='side-grid' class="left-grid grid-stack">
      </div>
    </div>
    <div class="main-grid-container">
      <div id="main-grid" class="right-grid grid-stack" >
      </div>
    </div>
 </div>
</body>

CSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    height: 100vh;
    width: 100vw;
    margin: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgb(216, 216, 216);
}

.container {
    width: 70vw;
    height: 70vh;
    background-color: rgb(252, 252, 252);

    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 10% 90%;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

.side-grid-container {
    grid-column: 1;
    height: 100%;
    width: 100%;
    background-color: rgb(88, 90, 90);
}

.main-grid-container {
    grid-column: 2;
    height: 100%;
    width: 100%;
    background-color: rgb(92, 92, 92);
}


.grid-stack-item-content{
    background-color: rgb(206, 214, 167);
    font-size: large;
}

.right-grid{
    background-color: rgb(168, 193, 218);
    /*height: 100%;*/
    padding-top: 2%;
}

.left-grid {
    background-color: rgb(114, 177, 196);
}

.drag-border {
    border: solid 5px cyan;
}

JavaScript

window.onload = () => {

   let options = {
     //column: 1,
     cellHeight: 100,
     disableResize: true
    };

    let options2 = {
    	disableOneColumnMode: true,
      minRow: 6, // don't collapse when empty
      maxRow: 6,
      acceptWidgets: true,
      removable: true,
      removeTimeout: 0,
      float: true
    };

    let grid1 = GridStack.init(options, '#side-grid');
    let grid2 = GridStack.init(options2, '#main-grid');

    //Left grid stuff
    let items1 = [
      {x: 0, y: 0, content: "1", id: 1},
      {x: 0, y: 1, content: "2", id: 2},
      {x: 0, y: 2, content: "3", id: 3},
      {x: 0, y: 3, content: "4", id: 4},
    ];
		grid1.load(items1);
    
    //Right grid stuff
    let items2 = [];
    // grid2.load(items2);

    grid2.on('removed', function(e, items) {
      item = items[0];
      item.h = item.w = 1;
      grid1.addWidget(item);
    });

}