JSFiddle - React, Tailwind, and code Playground

by Kyle Anderson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.js"></script>
<div class="row">
    <div class="col-sm-12">
        <div class="editable">
            <div class="grid-stack">
                <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
                    <div class="grid-stack-item-content">2 x 2</div>
                </div>
                <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="3" data-gs-height="4">
                    <div class="grid-stack-item-content">3 x 4</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.editable {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background-clip: border-box;
    margin-bottom: 20px;
    padding: 20px 10px;
}

.grid-stack-item-content {
    background-color: #eee;
    text-align: center;
}

JavaScript

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

var grid = $('.grid-stack').data('gridstack');

$('.grid-stack-item').on('resizestop', function() {
  var gridCell = $(this),
      node = $(this).data('_gridstack_node');
  
  if(typeof node == undefined) {
    return;
  }
    
  grid.update(gridCell, node.x, node.y, node.width, node.height);

  $(this).find('.grid-stack-item-content').text(node.width + ' x ' + node.height);
});