JSFiddle - React, Tailwind, and code Playground

by Rebecca Smith

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;
}

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

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

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

JavaScript

window.onload = function () {
    getElementsByTagName("td").onclick = toggleHighlight ();

}