JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
    <div id="colorator"></div>
    <div id="grid"></div>
</div>

CSS

#holder {
			    position: relative;
			    background: rgba(0, 0, 0, 0.9);
			    padding: 20px;
			    overflow: hidden;
			}
			#colorator {
			    margin-right: 50px;
			    /*background: rgba(0, 0, 0, 0.9);*/
			    width: 60px;
			    float: left;
			}
			#colorator > span {
			    border: thin solid DimGray;
			    display: inline-block;
			    overflow: hidden;
			    color: white;
			    width: 50px;
			    height: 50px;
			    margin: 3px;
			    opacity: .7;
			    border-radius: 3px;
			    transition: opacity .25s ease-in-out;
			    -moz-transition: opacity .25s ease-in-out;
			    -webkit-transition: opacity .25s ease-in-out;
			    -webkit-transition: -webkit-transform .2s ease-out;
			    -moz-transition: -moz-transform .2s ease-out;
			    -o-transition: -o-transform .2s ease-out;
			    -ms-transition: -ms-transform .2s ease-out;
			    transition: transform .2s ease-out;
			    box-shadow: 2px 2px 5px #888888;
			}
			#colorator >span:hover {
			    opacity: 1;
			    cursor:pointer;
			    -webkit-transform:scale(1.1);
			    -moz-transform:scale(1.1);
			    -o-transform:scale(1.1);
			    transform:scale(1.1);
			}
			#grid {
			    /*background: rgba(0, 0, 0, 0.9);*/
			    width: 380px;
			    overflow: hidden;
			    /*box-shadow: 2px 2px 5px #888888;*/
			}
			#grid > span {
			    border: thin solid Gray;
			    display: inline-block;
			    overflow: hidden;
			    color: GainsBoro;
			    width: 50px;
			    height: 50px;
			    margin: 5px;
			    opacity: .6;
			    text-align: center;
			    vertical-align: middle;
			    border-radius: 3px;
			    transition: opacity .25s ease-in-out;
			    -moz-transition: opacity .25s ease-in-out;
			    -webkit-transition: opacity .25s ease-in-out;
			    -webkit-transition: -webkit-transform .2s ease-out;
			    -moz-transition: -moz-transform .2s ease-out;
			    -o-transition: -o-transform .2s ease-out;
			    -ms-transition: -ms-transform .2s ease-out;
			    transition: transform .2s...

JavaScript

var colorEn = ["RoyalBlue", "LawnGreen", "red", "orange", "yellow", "black", "white", "MediumOrchid"];
var $color = "null";
var matrix = [];
var list = []

$(document).ready(function () {

    createMyGrid();
    createPath();

});

function createPath() {
    var row = 1;
    var randomColumn = Math.floor(Math.random() * (matrix[1].length - 0) + 0);

    matrix[1][randomColumn].data('partOfPath', true);
    matrix[1][randomColumn].addClass("red");


    do {
        CreateNewFrontier(row, randomColumn);
        var randomNumber = Math.floor((Math.random() * (list.length)));

        row = list[randomNumber][0];
        randomColumn = list[randomNumber][1];

        MarkPath(row, randomColumn);
    } while (row < 6)
}

function CreateNewFrontier(row, column) {
    list = [];
    if (row - 1 >= 1) AddToFrontier(row - 1, column);
    if (column + 1 < matrix[row].length) AddToFrontier(row, column + 1);
    if (row + 1 < matrix.length) AddToFrontier(row + 1, column);
    if (column - 1 >= 1) AddToFrontier(row, column - 1);
}

function AddToFrontier(row, column) {
    if (matrix[row][column].data('partOfPath') != true) {
        var markedNeighbors = 0;
        if (row - 1 >= 1 && !IsNotMarked(row - 1, column)) {
            markedNeighbors++;
        }
        if (column + 1 < matrix[row].length && !IsNotMarked(row, column + 1)) {
            markedNeighbors++;
        }
        if (row + 1 < matrix.length && !IsNotMarked(row + 1, column)) {
            markedNeighbors++;
        }
        if (column - 1 >= 1 && !IsNotMarked(row, column - 1)) {
            markedNeighbors++;
        }

        if (markedNeighbors < 2) {
            var index = list.length;
            list[index] = [];
            list[index][0] = row;
            list[index][1] = column;
        }
    }
}

function MarkPath(row, column) {
    matrix[row][column].data('partOfPath', true);
    matrix[row][column].addClass("red");
}

function IsNotMarked(row, column) {
    if (row < 1 || row >=...