JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gist.github.com/raw/589185/09ca0dea770aff745ab9f429920f132dba0230c3/mcl-min.js"></script>
<script src="http://github.com/cpojer/mootools-mobile/raw/master/Source/Desktop/Mouse.js"></script>
Canvas HTML5 implementation using Mootools Canvas Library.
<br>Click on the Square to destroy them and animate the ones above falling.
<canvas id="canvas" width=400 height=400></canvas>

JavaScript

var gridSize = 6;
var pC = new Array();
var cSr = new Array();

CANVAS.init({
    canvasElement: 'canvas',
    interactive: true
})
var layer = CANVAS.layers.add(new Layer({
    id: 'sqLay'
}));

CANVAS.addImage = function(layer, x, y, itemid) {

    var foo = new CanvasItem({

        id: itemid,
        x: x,
        y: y,
        w: 50,
        h: 50,
        state: 'normal',
        scale: 1,
        interactive: true,
        //although they have no interactive events!
        colors: {
            normal: '#f00',
            hover: '#00f'
        },
        events: {
            onDraw: function(ctx) {

                ctx.save();
                ctx.translate(this.x, this.y);

                var w = this.w * this.scale;
                var h = this.h * this.scale;
                var x = this.x - w * .5;
                var y = this.y - h * .5;

                ctx.fillStyle = this.colors[this.state];

                ctx.fillRect(w * -0.5, h * -0.5, w, h);

                ctx.restore();
                this.setDims(x, y, w, h);
            }
        }

    });

    CANVAS.layers.get('sqLay').add(foo);
    return foo;
};

CANVAS.rI = function(layer, itemid) //function to remove objects
{
    CANVAS.layers.get(layer).remove(CANVAS.layers.get('sqLay').get(itemid));
    var sqrKey = itemid.split("_");
    cSr[sqrKey[1]] = "nill";
}


CANVAS.layoutGrid = function() {

    var top_x = 25; //Intial X & Y Coordinates
    var top_y = 25;

    var grid_id = 0;
    var layoutRowNumber = gridSize - 1;

    var y_offset = 51;
    var x_offset = 51;

    for (i = 0; i < gridSize; i++) {
        y_cord = top_y;
        x_cord = top_x;
        for (j = 0; j < gridSize; j++) {
            pC[grid_id] = x_cord + "," + y_cord;
            cSr[grid_id] = "nill";

            x_cord = x_cord + x_offset;

            grid_id++;

        }
        top_y = top_y + y_offset;
    }
}

CANVAS.layoutRow = function() {
    var nSqOR = "";

    for (i = 5; i > -1; i--) {
        for...