JSFiddle - React, Tailwind, and code Playground

by Francisco Presencia Fandos

HTML

<table></table>

CSS

body {
    background: #EEE;
}
table {
    border-spacing: 5px;
}
td {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 0 #333 inset, 2px 2px 2px -2px #333;
    background: #FFF;
    transition: all 2s;
}
td.alive {
    background: #AAA;
    box-shadow: 2px 2px 2px -2px #333 inset, 0 0 0 0 #333;
}

JavaScript

/**
 * Conway's Game of Life
 * Just try it and play with it, it's quite solid
 * Engine of under 40 lines and 0.7kb of minimized Javascript
 */
var table = [
    [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
setInterval(function(){
    // Build the current html table while processing next one
    var newtable = [];
    table.forEach(function(row, i){
        tablehtml = (i == 0) ? "<tr>" : tablehtml + "<tr>";
        newtable[i] = [];
        row.forEach(function(alive, j){
            var tableEl = document.getElementsByTagName("table")[0];
            if(tableEl.innerHTML.length > 0) {
                var rowEl = tableEl.getElementsByTagName("tr")[i];
                var colEl = rowEl.getElementsByTagName("td")[j];
                colEl.className = alive ? "alive" : "";
                }
            tablehtml += alive ? '<td class="alive"></td>' : '<td></td>';
            var around = 0;
            [   [-1, -1], [-1,  0], [-1,  1], [ 0, -1],
                [ 0,  1], [ 1, -1], [ 1,  0], [ 1,  1] ]
                .forEach(function(c){
                    var k = i + c[0], l = j + c[1];
                    if (k >= 0 && k < table.length
                     && l >= 0 && l < table[j].length){
                        around += table[k][l];
                        }
                    });
            // Default (will account for all the other cases)
            newtable[i][j] = 0;
            if ((alive && around == 2) || around == 3)
                newtable[i][j] = 1;
            });
        tablehtml +=...