JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="status">Next player: X</div>

<table class="board">
  <tr>
    <td class="square">X</td>
    <td class="square">O</td>
    <td class="square">X</td>
  </tr>
  <tr>
    <td class="square"></td>
    <td class="square"></td>
    <td class="square">O</td>
  </tr>
  <tr>
    <td class="square">X</td>
    <td class="square">O</td>
    <td class="square">X</td>
  </tr>
</table>

CSS

.board {
  border-collapse: collapse;
}

.status {
  margin-bottom: 10px; 
}

.square {
  background: #FFF;
  font-size: 24px;
  font-weight: bold;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #999;
}