JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="canvas_container">
        <canvas id="canvas" width="300" height="420"></canvas>
    </div>
    <div id="menu">	<a id="clickme" href="#">Click me!</a>

    </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
#canvas_container {
    height:420px;
    text-align:center;
    background: #9b9b9b;
    /* Old browsers */
    background: -moz-linear-gradient(top, #9b9b9b 0%, #ffffff 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9b9b9b), color-stop(100%, #ffffff));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #9b9b9b 0%, #ffffff 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #9b9b9b 0%, #ffffff 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #9b9b9b 0%, #ffffff 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #9b9b9b 0%, #ffffff 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9b9b9b', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
}
canvas {
    display: inline;
}
#menu {
    height: 1000px;
    background: #FFF;

JavaScript

var frameInterval = 25;

var main_canvas = null;
var main_context = null;

var cell_canvas = null;
var cell_context = null;

var effect_canvas = null;
var effect_context = null;

var pattern = [
    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 1, 1, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1],
    [1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 1, 1, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0]
];

var cells = null;

var xOffset = 30;
var yOffset = 30;

var mouseX = 99999;
var mouseY = 99999;

var pulsating = false;

colorPreset1 = "208, 62, 62";
colorPreset2 = "138, 34, 34";
colorPreset3 = "130, 32, 32";
colorPreset4 = "60, 15, 15";

init();

function Cell(x, y, side, color) {
    this.x = x + xOffset;
    this.y = y + yOffset;
    this.side = side;
    this.color = color;
    this.layer = 0;
    this.glow = false;

    this.oldX = this.x;
    this.oldY = this.y;
    this.oldSide = this.side;
}

function init() {
    main_canvas = document.getElementById("canvas");
    main_context = main_canvas.getContext("2d");
    main_canvas.addEventListener('mousemove', handleMouseMove);
    main_canvas.addEventListener('mouseout', handleMouseOut);

    cell_canvas = document.createElement("canvas");
    cell_canvas.width = 40;
    cell_canvas.height = 20;
    cell_context = cell_canvas.getContext("2d");

    effect_canvas = document.createElement("canvas");
    effect_canvas.width = 80;
    effect_canvas.height = 40;
   ...