JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/underscore@1.8.3/underscore.js"></script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.js"></script>
<script src="https://unpkg.com/jqueryui@1.11.1/jquery-ui.js"></script>
<script src="https://rawgit.com/silverwind/gridstack.js/master/dist/gridstack.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/gridstack@0.3.0/dist/gridstack.min.css">
<link rel="stylesheet" href="https://unpkg.com/gridstack@0.3.0/dist/gridstack-extra.min.css">
<div class="grid-stack" id="grid1"></div>

CSS

body { display: flex; margin: 0; }
#grid1 { background: #aaf}
#grid2 { background: #faa}
.grid-stack {
  flex: 1;
  margin: 1rem;
  background: #ccc;
}
.grid-stack-item-content {
  background: #1af;
  color: #fff;
}

JavaScript

$('#grid1').gridstack({
  width: 12,
  height: 0,
  acceptWidgets: true,
  draggable: {
  scroll:true
  },
  disableOneColumnMode: true,
  float: true,
  resizable: {
          //handles: 'e, se, s, sw, w, nw, n, ne'
          handles: 'sw, w, se, e, s',
          resize: function( event, ui ) {
          console.log('Hola 2')
          }
        }
});

$( ".grid-stack-item" ).on( "resize", function( event, ui ) {
console.log('Hola')
} );

$('.grid-stack').each(function () {
  var grid = $(this).data('gridstack');
  [1, 2, 3].forEach(function(idx, y) {
    grid.addWidget($(`
      <div class"grid-stack-item">
        <div class="grid-stack-item-content">item ${idx}</div>
      <div/>`),0, y, 12, 1);
  });
});