JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<section class="demo">



        <div class="gridster">

          <ul>

            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>

            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>



            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>

            <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>



            <li class="try" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>

            <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>

            <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>



            <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>

            <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>



            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>

            <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>

          </ul>

        </div>



    </section>

CSS

/*! gridster.js - v0.1.0 - 2012-07-30
* http://gridster.net/
* Copyright (c) 2012 ducksboard; Licensed MIT */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}
/* =============================================================================
   NORMALIZATION
========================================================================== */

*  {
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
[hidden] { display: none; }

ul, ol {
    list-style: none;
}


/* =============================================================================
   COMMONS
========================================================================== */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    background-color: #EEEEEE;
    -webkit-font-smoothing: antialiased;
    font-size: x-small;
    color: #666666;
}

a {
    color: #004756;
    text-decoration: underline;
    font-weight: bold;
}

.wrapper {
    margin: 0 auto;
    width: 90%;
}


[role='header'] {
    padding-top: 78px;
    text-align:...

JavaScript

/*! gridster.js - v0.1.0 - 2012-07-30
* http://gridster.net/
* Copyright (c) 2012 ducksboard; Licensed MIT */
(function(a,b,c,d){function e(b){return b[0]&&a.isPlainObject(b[0])?this.data=b[0]:this.el=b,this.isCoords=!0,this.coords={},this.init(),this}var f=e.prototype;f.init=function(){this.set(),this.original_coords=this.get()},f.set=function(a,b){var c=this.el;c&&!a&&(this.data=c.offset(),this.data.width=c.width(),this.data.height=c.height());if(c&&a&&!b){var d=c.offset();this.data.top=d.top,this.data.left=d.left}var e=this.data;return this.coords.x1=e.left,this.coords.y1=e.top,this.coords.x2=e.left+e.width,this.coords.y2=e.top+e.height,this.coords.cx=e.left+e.width/2,this.coords.cy=e.top+e.height/2,this.coords.width=e.width,this.coords.height=e.height,this.coords.el=c||!1,this},f.update=function(b){if(!b&&!this.el)return this;if(b){var c=a.extend({},this.data,b);return this.data=c,this.set(!0,!0)}return this.set(!0),this},f.get=function(){return this.coords},a.fn.coords=function(){if(this.data("coords"))return this.data("coords");var a=new e(this,arguments[0]);return this.data("coords",a),a}})(jQuery,window,document),function(a,b,c,d){function f(b,c,d){this.options=a.extend(e,d),this.$element=b,this.last_colliders=[],this.last_colliders_coords=[],typeof c=="string"||c instanceof jQuery?this.$colliders=a(c,this.options.colliders_context).not(this.$element):this.colliders=a(c),this.init()}var e={colliders_context:c.body},g=f.prototype;g.init=function(){this.find_collisions()},g.overlaps=function(a,b){var c=!1,d=!1;if(b.x1>=a.x1&&b.x1<=a.x2||b.x2>=a.x1&&b.x2<=a.x2||a.x1>=b.x1&&a.x2<=b.x2)c=!0;if(b.y1>=a.y1&&b.y1<=a.y2||b.y2>=a.y1&&b.y2<=a.y2||a.y1>=b.y1&&a.y2<=b.y2)d=!0;return c&&d},g.detect_overlapping_region=function(a,b){var c="",d="";return a.y1>b.cy&&a.y1<b.y2&&(c="N"),a.y2>b.y1&&a.y2<b.cy&&(c="S"),a.x1>b.cx&&a.x1<b.x2&&(d="W"),a.x2>b.x1&&a.x2<b.cx&&(d="E"),c+d||"C"},g.calculate_overlapped_area_coords=function(b,c){var...