JSFiddle - React, Tailwind, and code Playground

by Meep

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.css">
<div>
  <div id='counter'></div>
  <div class="grid-stack" />
</div>

CSS

.grid-stack-item-content {
  background-color: #b5ce2f;
}

JavaScript

$(function() {
  var maxloops = 1000;

  $('.grid-stack').gridstack({
    disableOneColumnMode: true
  });
  grid = $('.grid-stack').data('gridstack');
  counter = $('#counter');
  widget1 = $('<div><div class="grid-stack-item-content" /><div/>');
  widget2 = $('<div><div class="grid-stack-item-content" /><div/>');

  for (i = 0; i < maxloops; i++) {
    grid.addWidget(widget1, 0, 0, 2, 2);
    grid.addWidget(widget2, 3, 3, 2, 2);
    grid.removeAll();
    counter.html(i + '/' + maxloops);
  }
  grid.addWidget(widget1, 0, 0, 2, 2);
  grid.addWidget(widget2, 3, 3, 2, 2);

});