JSFiddle - React, Tailwind, and code Playground

by jeffsturgis

HTML

<div class="board">
  
</div>

CSS

.board {
  width: 30%;
  min-width: 200px;
  margin: 0 auto;
}
.cell-row {
  border-top: 1px solid #000;
}
.cell-row:last-child {
  border-bottom: 1px solid #000;
}
.cell-wrapper {
	position: relative;
	height: 0;
  display: inline-block;
  vertical-align: middle;
}
.cell {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
  box-sizing: border-box;
  border-left: 1px solid #000;
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cell-wrapper:last-child .cell {
  border-right: 1px solid #000;
}

JavaScript

(function() {
var cell = document.createElement('div');
var row = document.createElement('div');
var i = 0;
var width = 10;
var height = 10;
var cellWidth = 100 / width;

cell.className = 'cell-wrapper';
cell.innerHTML = '<div class="cell">0</div>';
cell.style.cssText = 'padding-bottom: ' + cellWidth + '%; width: ' + cellWidth + '%';
row.className = 'cell-row';

while(height) {
	var currentRow = row.cloneNode(true);
  
  while(i < width) {
		currentRow.appendChild(cell.cloneNode(true));
		i++;
  }
  
  document.querySelectorAll('.board')[0].appendChild(currentRow);
  
  i = 0;
  height -= 1;
}

})();