JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

</div>

CSS

body {
    overflow: hidden;
}
#container {
    margin: -5px auto 0 auto;
    height: 100%;
    width: 100%;
}
#container .r {
    height: 2px;
}
#container span {
    display: inline-block;
    height: 2px;
    width: 2px;
}
.b1 {
    background: #000;
}

JavaScript

$(function () {
    var xScale = 5;
    var yScale = 5;
    var height = Math.floor($(window).width() / yScale);
    var width = Math.floor($(window).height() / xScale);
    
    
    var Game = function () {
        var grid = [];
        var gridUI = [];
        
        var updateUI = function () {
            for (var i = 0; i < width; i++) {
                var row = grid[i];
                var rowUI = gridUI[i];
                for (var j = 0; j < height; j++) {
                    rowUI[j].className = "b" + row[j];
                }
            }
        }
        
        var epoch = function () {
            var nextGen = [];
            for (var x = 0; x < width; x++) {
                var row = [];
                for (var y = 0; y < height; y++) {
                    var n = 0;
                    for (var dx = -1; dx <= 1; dx++) {
                        for (var dy = -1; dy <= 1; dy++) {
                            var gridRow = grid[x + dx];
                            if (typeof gridRow !== 'undefined'
                                && gridRow[y + dy] && !(dx == 0 && dy == 0)) {
                                n += 1;
                            }
                        }
                    }
                    var c = 0;
                    // if (n === 2 || n === 3) {
                    if ((n === 2 && grid[x][y] === 1) || n == 3) {
                        c = 1;
                    }
                    row.push(c);
                }
                nextGen.push(row);
            }
            grid = nextGen;
            updateUI();
            console.log('epoch')
        }
        
        // Constructor
        // Create a random display
        var $container = $("#container");
        for (var i = 0; i < width; i++) {
            var row = [];
            gridUI[i] = [];
            var $r = $("<div class='r'></div>");
            for (var j = 0; j < height; j++) {
                var b = Math.floor(Math.random() * 2);
              ...