JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="main">
		<table>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php echo rand($range, $range * -1); ?>px; top: <?php echo rand($range, $range * -1); ?>px;"></td>
					<td class="cell-white" style="left: <?php...

CSS

.MIclearafter:after {
  display: table;
  content: '';
  clear: both;
}
.MIboxsizing * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #dbdbdb;
  font: 62.5%/1 arial, sans-serif;
}
#main {
  width: 79.7em;
  height: 24.8em;
  margin: 3em auto;
  background: #3C3C3C;
}
table {
  border-collapse: separate;
  border-spacing: 3px;
}
td {
  width: .5em;
  height: .5em;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.cell-white {
  background: #fff;
  opacity: 0;
}

JavaScript

randomFadeIn(25, 25);

function randomFadeIn (chunkSize, speed) {
	var shuffledArray = shuffleArray(Array.prototype.slice.call(document.getElementsByClassName('cell-white')));
	var shuffleChunks = [];
	var tempChunk = [];
	var m = 0;
	for (var k = 0; k < shuffledArray.length; k++) {
		tempChunk[m] = shuffledArray[k];
		m++;
		if (k === shuffledArray.length - 1 || m === chunkSize) {
			shuffleChunks.push(tempChunk);
			m = 0;
			tempChunk = [];
		}
	}
	(function loopChunks(l) {
		setTimeout(function () {
			for (var q = shuffleChunks[l].length - 1; q >= 0; q--) {
				shuffleChunks[l][q].style.opacity = 1;
			}
			if (l) {
				loopChunks(l - 1);
			}
		}, speed);
	})(shuffleChunks.length - 1);
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}