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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5.js"></script>
<div class="grid-stack src"></div>
<div class="grid-stack dest"></div>

CSS

body {
  margin: 0px;
}
.grid-stack {
  display: inline-block;
}
.src {
  background-color: lightgoldenrodyellow;
  width: 30%;
}
.dest {
  background-color: lightcyan;
  width: 69%;
}
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
.dest .grid-stack-item-content {
  background-color: #9caabc;
}

JavaScript

function initGrids(evt) {
  let grids = GridStack.initAll({
    cellHeight: '5em',
    acceptWidgets: true,
    column: 1,
    disableOneColumnMode: true, // jsfiddle small window so we can set to anything
    minRow: 8,
  });
  
  grids[0].load([
    {id: 'firstname', content: 'First name'},
    {id: 'lastname', content: 'Last name'},
  ]);
  grids[1].column(2);
}

window.addEventListener('DOMContentLoaded', initGrids);