JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<div class="outer-container">
  <div class="grid-stack"></div>
</div>

CSS

.outer-container {
  max-width: 800px;
  margin: 0 auto;
}


.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

.grid-stack {
  border: 1px black solid;
}

JavaScript

options = {
	disableOneColumnMode: true,
  row: 15,
  margin: 2,
  cellHeight: 20,
  acceptWidgets: true,
  float: false,
};

GridStack.init(options).load([
	{ x: 0, y: 0, w: 4, h: 6, content:'0' },
	{ x: 0, y: 6, w: 4, h: 2, content:'1' },
	{ x: 0, y: 8, w: 4, h: 2, content:'2' },
	{ x: 0, y: 10, w: 4, h: 2, content:'3' },
	{ x: 0, y: 12, w: 12, h: 3, content:'4' },
	{ x: 4, y: 0, w: 8, h: 12, content:'5' },
])