JSFiddle - React, Tailwind, and code Playground

HTML

<table class="bingo">
    <tr>
			<td id="square0"></td>
			<td id="square1"></td>
			<td id="square2"></td>
	</tr>
	<tr>
			<td id="square3"></td>
			<td id="square4"></td>
			<td id="square5"></td>

	</tr>
	<tr>
			<td id="square6"></td>
			<td id="square7"></td>
			<td id="square8"></td>
	</tr>
</table>

CSS

table, th, td { 
	border: 1px solid #000;
	border-collapse: collapse;
	font-size: 1.0rem;
	margin: 25px auto 0px auto;
	text-align: center;
}

.highlight {
    background-color: #cecece;
}

th, td {
	padding: 5px 10px;
}

/* bingo table */
.bingo th {
	color: red;
	padding: 10px;
}

.bingo  td {
	color: #000;
	padding: 20px;
}

JavaScript

window.onload = function () {
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++)
        tds[i].onclick = toggleHighlight;

}

function toggleHighlight() {
    var td = this;
    if (td.className == 'highlight')
        td.className = '';
    else
        td.className = 'highlight';
}