JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://www.danieldoktor.dk/Gridster/js/spectrum.js"></script>
<link rel="stylesheet" href="http://www.danieldoktor.dk/Gridster/css/spectrum.css">
<div role="main">

<div class="addbox"><a href="JavaScript:void(0);">Add a box  :)</a></div>


   

   <section class="demo">

        <div class="gridster">
          <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            	<div class="box">
            <header class="box_header">
            <h1>HEADER 1</h1>
            <div class="colorpicker"><input type="text" class="flatPalette"/></div>
            </header>
            <div class="menu">
           
            <div class="deleteme"><a  href="JavaScript:void(0);">delete me ;(</a></div>
            
            </div>
            </div>
            	</li>
            
           

            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1">
            <div class="box">
            <div class="menu">
            <header class="box_header">
            <h1>HEADER 2</h1>
          
            <div class="colorpicker"><input type="text" class="flatPalette"/></div>
            </header>
            
            
            <div class="deleteme"><a  href="JavaScript:void(0);">delete me ;(</a></div>
            
           </div>
           </div>
            </li>
        
          
          </ul>
        </div>

    </section>

   

  

</div>

CSS

/*! gridster.js - v0.1.0 - 2012-10-20
* 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}

.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .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 {
 ...

JavaScript

var gridster;

  $(function(){

    gridster = $(".gridster > ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        min_cols: 6
    }).data('gridster');

  });
  
  
  // header slide
 

$(document).on("click", 'h1', function() {
    if (!$(this).parent().hasClass('header-down')) {
        $(this).parent().stop().animate({
            height: '100px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).addClass('header-down');
    } else {
        $(this).parent().stop().animate({
            height: '30px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).removeClass('header-down');
    }
});



$(document).click(function () {
    if ($(".box_header").hasClass('header-down')) {
        $(".box_header").stop().animate({
            height: '30px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).removeClass('header-down');
    }
});

$(document).on("click", ".box_header", function (e) {
    e.stopPropagation(); // This is the preferred method.
    // This should not be used unless you do not want
    // any click events registering inside the div
});

//add box
$('.addbox').on("click", function() { 
gridster.add_widget('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><div class="box"><div class="menu"><header class="box_header"><h1>HEADER 5</h1><div class="colorpicker"><input type="text" class="flatPalette"/></div></header><div class="deleteme"><a  href="JavaScript:void(0);">delete me ;(</a></div></div></li>', 2, 1)

});

//remove box
$(document).on('click', ".deleteme", function () {
    $(this).parents().eq(2).addClass("activ");
    gridster.remove_widget($('.activ'));
    $(this).parents().eq(2).removeClass("activ");

});


// Color picker
function updateBackground(color) {
    $(this).parents(".box_header").css("background",...