JSFiddle - React, Tailwind, and code Playground

by nniicc

HTML

<link rel="stylesheet" href="http://troolee.github.io/gridstack.js/gridstack.css">
<script src="http://troolee.github.io/gridstack.js/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://troolee.github.io/gridstack.js/gridstack.js"></script>
<link rel="stylesheet" href="http://troolee.github.io/gridstack.js/freelancer/css/freelancer.css">
<script src="https://raw.githubusercontent.com/troolee/gridstack.js/master/src/gridstack-extra.scss"></script>
<div class="grid-stack">
    <div class="grid-stack-item" 
        data-gs-x="0" data-gs-y="0" 
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item" 
        data-gs-x="4" data-gs-y="0" 
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>

CSS

.grid-stack-item{
    background-color: #ccc;
}

JavaScript

var options = {
        cell_height: 80,
        vertical_margin: 10,
     float: 'free'
    };
    $('.grid-stack').gridstack(options);