Starting Point Tic Tac Toe

App.jsx

function App() {
  return (
    <>
      <h1>Tic Tac Toe</h1>
      <div className="board">
        <div className="row">
          <div className="square">X</div> <div className="square">X</div>
          <div className="square">X</div>
        </div>
        <div className="row">
          <div className="square">X</div> <div className="square">X</div>
          <div className="square">X</div>
        </div>
        <div className="row">
          <div className="square">X</div> <div className="square">X</div>
          <div className="square">X</div>
        </div>
      </div>
    </>
  );
}

export default App;

index.css

h1,
h2 {
  text-align: center;
  font-size: 50px;
}
.board {
  width: 300px;
  height: 300px;
  margin: 20px auto;
}
.row {
  display: flex;
}

.square {
  height: 100px;
  width: 100px;
  font-size: 75px;
  text-align: center;
  cursor: pointer;
}

.row:first-of-type > .square:nth-of-type(2),
.row:nth-of-type(2) > .square:nth-of-type(2),
.row:nth-of-type(3) > .square:nth-of-type(2) {
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.row:first-of-type,
.row:nth-of-type(2) {
  border-bottom: 1px solid black;
}
.new-game {
  width: 300px;
  height: 75px;
  font-size: 30px;
  display: block;
  margin: 0 auto;
}