JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="chessboard" id="chessboard"></div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
}

.chessboard div {
  width: 50px;
  height: 50px;
}

.chessboard .white {
  background-color: #f3f3f3;
}

.chessboard .black {
  background-color: #1d1c1a;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const chessboard = document.getElementById("chessboard");

  for (let row = 0; row < 8; row++) {
    for (let col = 0; col < 8; col++) {
      const square = document.createElement("div");
      square.classList.add((row + col) % 2 === 0 ? "white" : "black");
      chessboard.appendChild(square);
    }
  }
});