JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chess-board">
</div>

CSS

#chess-board {
  border: 1px solid;
  width: 416px;
  height: 416px;
  font-size: 0;
}

.cell {
  display: inline-block;
  border: 1px solid;
  width: 50px;
  height: 50px;
  margin: 0 0 0 0;
}

.red {
  background: black;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
	let color = 1, temp;
	for (let i = 0; i < 64; i++) {
  	color = i % 8 === 0 ? color : -color
  	temp = color === 1 ? '<div class="cell"></div>' : '<div class="cell red"></div>';
    document.getElementById("chess-board").innerHTML += temp;
  }
});