JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root"></div>

CSS

.row {
  height: 30px;
  border: 1px solid;
  display: flex;
}

.row:not(:last-child) {
  border-bottom: 0;
}

.col {
  height: inherit;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.col:not(:last-child) {
  border-right: 1px solid;
}

JavaScript

const table = document.getElementById('root');

function matrixArray(rows, columns){
  var arr = [];
  for(var i=0; i<rows; i++){
    let row = document.createElement('div');
    row.className = 'row';
    
    for(var j=0; j<columns; j++){
      let col = document.createElement('div');
      col.className = 'col';
      col.innerText = Math.floor(Math.random() * 20) + 10;
      row.appendChild(col);
    }
    table.appendChild(row);
  }
  return arr;
}

 matrixArray(5, 5);