JSFiddle - React, Tailwind, and code Playground

HTML

<table id="colors">
    <tr>
        <td>aa</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
<button id="doit">Change Colors</button>

CSS

#colors td {
    width: 5em;
    height: 5em;
}

JavaScript

'use strict';
    var shades = ['00', '33', '66', '99', 'CC', 'FF'],
        min = 0,
        max = 5,
        button = document.getElementById('doit');

    function colors() {
        [].slice.call(document.querySelectorAll('#colors td')).forEach(function (tdEl) {
            var r = Math.round(Math.random() * (max - min) + min),
                g = Math.round(Math.random() * (max - min) + min),
                b = Math.round(Math.random() * (max - min) + min);

            tdEl.style.backgroundColor = '#' + shades[r] + shades[g] + shades[b];
        });
    }

    button.addEventListener('click', colors, false);
    colors();