JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table id="Table">
        <tr id="Row1">
            <td class="hvr-outline-out">Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
        <tr id="Row2">
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
        <tr id="Row3">
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
        <tr id="Row4">
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
        <tr id="Row5">
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
            <td>Item 5</td>
        </tr>
    </table>
    <button id="Button">test</button>
</body>

CSS

td {
    display: inline-block;
    position:relative;
    vertical-align: middle;
    padding: 20px;
    margin: 5px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
}
/* Outline Out */
 td:before {
    content:'';
    position: absolute;
    border: solid 4px rgba(0, 0, 0, .8);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
td:hover:before, td:focus:before, td:active:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}

JavaScript

var Items = document.querySelectorAll("td");
var Random = function (Multiplyer) {
    return String(Math.round(Math.random() * Multiplyer));
};
var FuncRGB = function () {
    var RGB = [Random(255), Random(255), Random(255)].join(",");
    return RGB;
};
var SetSquares = function () {
    var RGB = FuncRGB();
    for (var i = 0; i <= Items.length; i++) {
        Items[i].style.backgroundColor = "rgb(" + RGB + ")";
    }
};

var tableAlert = function (e) {
    alert(e);
};

//document.getElementById('Table').addEventListener("click", tableAlert, false);
document.getElementById("Button").onclick = SetSquares;
$('td').click(function() {
    alert("Hello");
});