JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-spacing: 0;
  border: 2px black solid;
}
td {
  height: 37px;
  width: 37px;
  border: 2px transparent solid;
}
td:hover {
  border-color: black;
}
td.playerOne {
  border-color: red;
}

td.playerTwo {
  border-color: green;
}

JavaScript

$(function(){
	$("td").click(function() {
  	$(this).removeClass();
    $(this).addClass(["playerOne", "playerTwo"][Math.round(Math.random())])
  });
});