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 = [];
			
			$(document).ready(function(){       
		
				createMyGrid();
				createPath();

			});

			function createPath() {
				var randomColumn = Math.floor(Math.random() * (matrix[1].length - 0) + 0);
				matrix[1][randomColumn].data('partOfPath', true);
				matrix[1][randomColumn].addClass("red");
				for (var row = 2; row <= 6; row++) {
					for (var col = 1; col <= 6; col++) {
						if (matrix[row-1][col].data('partOfPath')) { //if block above is partOfPath... add a set of items of random # of columns across
							addRowPath(row, col);
						}
					}			
				}
			}
			
			function addRowPath (row, pathCol) { //need to start offset from that row/col position, 
				var randRowPathLength = Math.floor(Math.random() * (matrix[row].length - 0) + 0);
					for (var col = pathCol; col <= randRowPathLength; col++) {			
						matrix[row][col].addClass("red");	
					}
			}

			function createMyGrid() {
				//create 6x6 matrix
				for(var i=1; i<=6; i++) {
					matrix[i] = [];
					for(var j=1; j<=6; j++) {
						var colorIndex = Math.floor(Math.random() * (colorEn.length - 0) + 0);
						var $span = $('<span />').attr('class', 'colorSquare').html("[" + i + "][" + j + "]");
						$("#grid").append($span);
						matrix[i][j] = $span;
					}
				}
			}
			
						
			function log (word) {
				console.log(word);
			}