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


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

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

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

.gray {
    background-color:#efefef;
}
}

JavaScript

$(document).ready(function(){
    $('td').on('click',function(){
          $(this).toggleClass('gray');
    });
});