JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card border-0">
  <table width="465" border="0" cellspacing="0" cellpadding="0" height="465" onclick="tes(event);">
    <tr>
      <td id="i1" class="i1" value="TOP-LEFT">1</td>
      <td id="i2" class="i2" value="TOP-CENTER">2</td>
      <td id="i3" class="i3" value="TOP-LEFT">3</td>
    </tr>
    <tr>
      <td id="i4" class="i4" value="CENTER-LEFT">4</td>
      <td id="i5" class="i5" value="CENTER-CENTER">5</td>
      <td id="i6" class="i6" value="CENTER-RIGHT">6</td>
    </tr>
    <tr>
      <td id="i7" class="i7" value="BOTTOM-LEFT">7</td>
      <td id="i8" class="i8" value="BOTTOM-CENTER">8</td>
      <td id="i9" class="i9" value="BOTTOM-RIGHT">9</td>
    </tr>
  </table>
</div>

CSS

table {
  margin: auto;
  border-collapse: collapse;
  cursor: pointer;
}

td.clicked {
  padding: 15px 60px;
  border: 1px solid #000;
  background: #444;
}

td:hover {
  background: #eee;
}

JavaScript

function tes(event) {
  if (event.target.nodeName == "TD") {
    event.target.classList.toggle("clicked");
  }
}