JSFiddle - React, Tailwind, and code Playground

CSS

div {
  text-align: center;
}

.white {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: orange;
  vertical-align: middle;
  border: 2px solid brown;
}

.black {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: brown;
  border: 2px solid orange;
  vertical-align: middle;
}

JavaScript

function drawChessBoard() {
  var para = document.createElement("html");
  var body = document.createElement("body");
  para.appendChild(body);
  var body = document.getElementsByTagName("body")[0];
  var cb = document.createElement('chessboard');
  body.appendChild(cb);
  for (var row = 1; row <= 8; row++) {
    var div = document.createElement("div");
    cb.appendChild(div);
    for (let col = 1; col <= 8; col++) {
      var span = document.createElement('span');
      div.appendChild(span);
      if (row % 2 === 1 && col % 2 === 1) {
        span.className = "white";
      } else if (row % 2 === 1 && col % 2 === 0) {
        span.className = "black";
      } else if (row % 2 === 0 && col % 2 === 0) {
        span.className = 'white';
      } else {
        span.className = "black";
      }
    }
  }
}
drawChessBoard();