JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-resize/1.1/jquery.ba-resize.js"></script>
<script src="https://raw.githubusercontent.com/tmrudick/angular-gridster/master/lib/angular-gridster.js"></script>
<div class="gridster">
    <ul>
        <li class="gridster-item" gridster-item="item" ng-repeat="item in standardItems" tabindex="{{ $index + 1 }}" ng-class="{smalltiles:item.sizeY<2,largetile:item.sizeY>1}"></li>
    </ul>
</div>

CSS

.gridster{position:relative;margin:auto;height:0}.gridster>ul{margin:0;list-style:none;padding:0}.gridster-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;list-style:none;z-index:2;position:absolute;display:none}.gridster-loaded{-webkit-transition:height .3s;-moz-transition:height .3s;-o-transition:height .3s;transition:height .3s}.gridster-loaded .gridster-item{display:block;position:absolute;-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;-webkit-transition-delay:50ms;-moz-transition-delay:50ms;-o-transition-delay:50ms;transition-delay:50ms}.gridster-loaded .gridster-preview-holder{display:none;z-index:1;position:absolute;background-color:#ddd;border-color:#fff;opacity:0.2}.gridster-loaded .gridster-item.gridster-item-moving,.gridster-loaded .gridster-preview-holder{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.gridster-mobile{height:auto !important}.gridster-mobile .gridster-item{height:auto;position:static;float:none}.gridster-item.ng-leave.ng-leave-active{opacity:0}.gridster-item.ng-enter{opacity:1}.gridster-item-moving{z-index:3}.gridster-item-resizable-handler{position:absolute;font-size:1px;display:block;z-index:5}.handle-se{cursor:se-resize;width:0;height:0;right:1px;bottom:1px;border-style:solid;border-width:0 0 12px...

JavaScript

angular.module('myApp', ['gridster'])

.controller('mainController', function($scope) {
  $scope.standardItems = [{
    sizeX: 2,
    sizeY: 1,
    row: 0,
    col: 0
  }, {
    sizeX: 2,
    sizeY: 1,
    row: 1,
    col: 0
  }, {
    sizeX: 4,
    sizeY: 2,
    row: 0,
    col: 2
  }, {
    sizeX: 2,
    sizeY: 1,
    row: 2,
    col: 0
  }, {
    sizeX: 2,
    sizeY: 1,
    row: 2,
    col: 2
  }, {
    sizeX: 2,
    sizeY: 1,
    row: 2,
    col: 4
  }, ];

  $scope.gridsterOpts2 = {
    margins: [20, 20],
    outerMargin: false,
    swapping: false,
    pushing: false,
    rowHeight: 'match',
    mobileBreakPoint: 600,
    margins: [10, 10],
    floating: false,
    isMobile: true,
    draggable: {
      enabled: false
    },
    resizable: {
      enabled: false,
      handles: ['n', 'e', 's', 'w', 'se', 'sw']
    }
  };

});

/*
 * angular-gridster
 * http://manifestwebdesign.github.io/angular-gridster
 *
 * @version: 0.13.5
 * @license: MIT
 */
!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";return a.module("gridster",[]).constant("gridsterConfig",{columns:6,pushing:!0,floating:!0,swapping:!1,width:"auto",colWidth:"auto",rowHeight:"match",margins:[10,10],outerMargin:!0,isMobile:!1,mobileBreakPoint:600,mobileModeEnabled:!0,minColumns:1,minRows:1,maxRows:100,defaultSizeX:2,defaultSizeY:1,minSizeX:1,maxSizeX:null,minSizeY:1,maxSizeY:null,saveGridItemCalculatedHeightInMobile:!1,resizable:{enabled:!0,handles:["s","e","n","w","se","ne","sw","nw"]},draggable:{enabled:!0,scrollSensitivity:20,scrollSpeed:15}}).controller("GridsterCtrl",["gridsterConfig","$timeout",function(b,c){var d=this;a.extend(this,b),this.resizable=a.extend({},b.resizable||{}),this.draggable=a.extend({},b.draggable||{});var...