JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gridster-container gridster">

</div>
<script>
/*! gridster.js - v0.7.0 - 2016-02-26 - * https://dsmorse.github.io/gridster.js/ - Copyright (c) 2016 ducksboard; Licensed MIT */ !function(a,b){"use strict";"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define("gridster-coords",["jquery"],b):a.GridsterCoords=b(a.$||a.jQuery)}(this,function(a){"use strict";function b(b){return b[0]&&a.isPlainObject(b[0])?this.data=b[0]:this.el=b,this.isCoords=!0,this.coords={},this.init(),this}var c=b.prototype;return c.init=function(){this.set(),this.original_coords=this.get()},c.set=function(a,b){var c=this.el;if(c&&!a&&(this.data=c.offset(),this.data.width=c[0].scrollWidth,this.data.height=c[0].scrollHeight),c&&a&&!b){var d=c.offset();this.data.top=d.top,this.data.left=d.left}var e=this.data;return void 0===e.left&&(e.left=e.x1),void 0===e.top&&(e.top=e.y1),this.coords.x1=e.left,this.coords.y1=e.top,this.coords.x2=e.left+e.width,this.coords.y2=e.top+e.height,this.coords.cx=e.left+e.width/2,this.coords.cy=e.top+e.height/2,this.coords.width=e.width,this.coords.height=e.height,this.coords.el=c||!1,this},c.update=function(b){if(!b&&!this.el)return this;if(b){var c=a.extend({},this.data,b);return this.data=c,this.set(!0,!0)}return this.set(!0),this},c.get=function(){return this.coords},c.destroy=function(){this.el.removeData("coords"),delete this.el},a.fn.coords=function(){if(this.data("coords"))return this.data("coords");var a=new b(this);return this.data("coords",a),a},b}),function(a,b){"use strict";"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define("gridster-collision",["jquery","gridster-coords"],b):a.GridsterCollision=b(a.$||a.jQuery,a.GridsterCoords)}(this,function(a,b){"use strict";function c(b,c,e){this.options=a.extend(d,e),this.$element=b,this.last_colliders=[],this.last_colliders_coords=[],this.set_colliders(c),this.init()}var...

CSS

li {
  background-color:lightblue;
  text-align:center;
}

ul {
  list-style-type: none;
}


//Gridster
/*! gridster.js - v0.6.10 - 2015-05-31
* https://dsmorse.github.io/gridster.js/
* Copyright (c) 2015 ducksboard; Licensed MIT */
.gridster {
  position: relative;
}
.gridster > * {
  -webkit-transition: height .4s, width .4s;
  -moz-transition: height .4s, width .4s;
  -o-transition: height .4s, width .4s;
  -ms-transition: height .4s, width .4s;
  transition: height .4s, width .4s;
}
.gridster .gs-w {
  z-index: 2;
  position: absolute;
}
.gridster .preview-holder {
  z-index: 1;
  position: absolute;
  background-color: #fff;
  border-color: #fff;
  opacity: 0.3;
}
.gridster .player-revert {
  z-index: 10!important;
  -webkit-transition: left .3s, top .3s!important;
  -moz-transition: left .3s, top .3s!important;
  -o-transition: left .3s, top .3s!important;
  transition: left .3s, top .3s!important;
}
.gridster.collapsed {
  height: auto !important;
}
.gridster.collapsed .gs-w {
  position: static !important;
}
.ready .gs-w:not(.preview-holder) {
  -webkit-transition: opacity .3s, left .3s, top .3s;
  -moz-transition: opacity .3s, left .3s, top .3s;
  -o-transition: opacity .3s, left .3s, top .3s;
  transition: opacity .3s, left .3s, top .3s;
}
.ready .gs-w:not(.preview-holder),
.ready .resize-preview-holder {
  -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}
.gridster .dragging,
.gridster .resizing {
  z-index: 10!important;
  -webkit-transition: all 0s !important;
  -moz-transition: all 0s !important;
  -o-transition: all 0s !important;
  transition: all 0s !important;
}
.gs-resize-handle {
  position: absolute;
  z-index: 1;
}
.gs-resize-handle-both {
  width: 20px;
  height: 20px;
  bottom: -8px;
  right: -8px;
 ...

JavaScript

var li = '<li><p>Hello world</p></li>';

var content = [];
for (var i = 0; i < 20; i++){
   content.push(li);
}

var drawGrid = function(){

  var gridsterContainer = $('.gridster-container');
  gridsterContainer.empty();
  var ul = $('<ul></ul>');
  gridsterContainer.append(ul);
  var gridster = ul.gridster({
    widget_margins: [2, 2],
    widget_base_dimensions: [60, 60],
    max_cols: 20,
    min_cols:1
  }).data('gridster');

  for (var k = 0; k < content.length; k++){
     gridster.add_widget(content[k]);
  }
};

$(window).resize(function(){
	drawGrid(content);
});

drawGrid(content);