JSFiddle - React, Tailwind, and code Playground

by cstigler

HTML

<div id="container">
</div>

CSS

.row {
    height: 1px;
    margin: 0;
}
.cell {
    display: inline-block;
    width: 1px;
    height: 1px;
    margin: 0;
}

JavaScript

var randomRGB = function() {
    return Math.floor(Math.random() * 255);
};
var makeRandomColor = function() {
    return 'rgba(' + randomRGB() + ',' + randomRGB() + ',' + randomRGB() + ',0.5)';
    // return '#'+Math.floor(Math.random()*16777215).toString(16);
}

var cont = document.getElementById('container');
var cells = [];
for (var i = 0; i < 300; i++) {
    var r = document.createElement('div');
    r.className = 'row';
    cont.appendChild(r);
    
    for (var j = 0; j < 300; j++) {
        var c = document.createElement('div');
        c.className = 'cell';
        c.style.backgroundColor = makeRandomColor();
        cells.push(c);
        r.appendChild(c);
    }
}

setInterval(function() {
    var length = cells.length;
    while (length--) {
        cells[length].style.backgroundColor = makeRandomColor();
    }
}, 1000);