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
});

$('.grid-stack-item').on('resizestop', function() {
    var node = $(this).data('_gridstack_node');

    if(typeof node == undefined) {
        return;
    }

    $(this).html('<div class="grid-stack-item-content ui-draggable-handle">' + node.width + ' x ' + node.height + '</div>');
});