JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <div id='map'></div>
    <br />
    <div id='map2'></div>
  </body>

  <style>
    .map-box {
      width: 20px;
      height: 20px;
      border-color: grey;
      border-width: 1px;
      border-style: solid;
      display: inline-block;
      margin: 0;
      padding: 0;
    }

  </style>

</html>

JavaScript

function fast() {
  const wh = window.innerHeight;
  const ww = window.innerWidth;
  let area = wh * ww;
  i = 1;
  const ms = Date.now();
  const divs = [];
  while (area > 0) {
    divs.push("<div class='map-box' id='box" + i + "'></div>");
    area -= 20 * 20;
    i += 1;
  }
  document.getElementById("map").innerHTML = divs.join("");
  console.log("done fast", Date.now() - ms);
}

function slow() {
  var wh = window.innerHeight;
  var ww = window.innerWidth;
  var area = wh * ww;
  i = 1;
  const ms = Date.now();
  while (area > 0) {
    document.getElementById("map2").innerHTML += "<div class='map-box' id='box" + i + "'></div>";
    area -= 20 * 20;
    i += 1;
  }
  console.log("done slow", Date.now() - ms);
}

fast();
slow();