Vídeo: criando um Jogo da Velha com React

:root {
  --O-color: #2196f3;
  --X-color: #f44336;
  --E-color: #777;

  --green: #4caf50;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: center;
  justify-content: center;

  font-family: sans-serif;
  height: 100vh;
  background-color: #eee;
}

.title {
  text-align: center;
  font-size: 3rem;
  color: #555;
  margin-bottom: 2rem;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  grid-template-rows: repeat(3, 200px);
  gap: 1rem;
}

.board.game-over {
  opacity: 0.8;
}

.cell {
  display: grid;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-radius: 5px;
  font-size: 3rem;
  font-weight: bold;
  color: #00000066;

  cursor: pointer;
}

.cell:not(.O):not(.X):hover {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cell.O,
.cell.X,
.game-over .cell {
  cursor: not-allowed;
}

.cell.O {
  background-color: var(--O-color);
}

.cell.X {
  background-color: var(--X-color);
}

footer {
  text-align: center;
}

.winner-message {
  margin: 2rem;
}

.winner-message span.O {
  color: var(--O-color);
}

.winner-message span.X {
  color: var(--X-color);
}

.winner-message span.E {
  color: var(--E-color);
}

button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--green);
  color: white;
  font-size: 1.2rem;
}