JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
  </tr>
  <tr>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
  </tr>
  <tr>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
    <td><div style="width:100%;height:100%;"></div></td>
  </tr>
</table>

CSS

td {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

JavaScript

document.querySelector('table')
	.addEventListener('click', function(e) {
    if (e.target.tagName !== 'TD') {
      return;
    }
  
    e.target.style.backgroundColor = 'red';
  });