JSFiddle - React, Tailwind, and code Playground

CSS

body {
    background-color: blue;
    margin: 0;
}
.cellDiv:nth-child(odd) {
    background-color: red;
    float:left;
}
.cellDiv:nth-child(even) {
    background-color: green;
    float:left;
}

JavaScript

console.log('width: ' + window.innerWidth, 'height: ' + window.innerHeight)

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var size = 10;

// Calculate the number of cells we can fit in the width 
  //and height (there will be extra space)
  w = Math.floor(windowWidth / size);
  h = Math.floor(windowHeight / size);

  // Calculate the extra space
  var widthDiff = windowWidth % size;
  var heightDiff = windowHeight % size;

  // Add the needed amount of height and width to each cell to fill the window
  var widthSize = size + widthDiff / w;
  var heightSize = size + heightDiff / h;

  //NOW, convert pixels to percentages.
  var widthPercent = widthSize / windowWidth * 100;
  var heightPercent = heightSize / windowHeight * 100;

  // Begin to alter the DOM
  var parentDiv = document.createElement('div');
  parentDiv.className = 'grid';
  parentDiv.style.height = windowHeight + 'px';
  parentDiv.style.width = windowWidth + 'px';

  for(var x = 0; x < w*h; x++) {
    var cellDiv = document.createElement('div');
    cellDiv.className = 'cellDiv';
    cellDiv.style.height = heightPercent + '%'; 
    cellDiv.style.width = widthPercent + '%'; 
    parentDiv.appendChild(cellDiv)
  }
  document.body.appendChild(parentDiv);