JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<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.all.js"></script>
<h1>Advanced Demo</h1>
  <div class="row">
    <div class="col-md-2 d-none d-md-block">
      <div class="newWidget grid-stack-item" data-gs-no-resize="true">
        <div class="grid-stack-item-content" style="padding: 5px;">
          <div>
            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
          </div>
            <span>non resize</span>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-10">
      <div class="grid-stack"></div>
    </div>
  </div>

CSS

.grid-stack {
  background: #FAFAD2;
}

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

JavaScript

let grid = GridStack.init({
	float: true,
	acceptWidgets: true,
  dragIn: '.newWidget',  // class that can be dragged from outside
  dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
	disableOneColumn: true
  });

let items = [
  {x: 3, y: 1, width: 2, height: 2, content: '1'},
  {x: 5, y: 0, width: 2, height: 2, noResize: true, content: 'can\'t resize'}
];
grid.load(items);