JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Width:</td>
        <td>
            <input id="width-in" name="width-in" type="text" />
        </td>
    </tr>
    <tr>
        <td>Height:</td>
        <td>
            <input id="height-in" name="height-in" type="text" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button onClick="renderGrid()">Compute</button>
        </td>
    </tr>
</table>
<br/>
<div id="matrix-shell"></div>

CSS

.matrix-block {
    height: 10px;
    width: 10px;
    margin: 1px;
    float: left;
    background-color: black;
}
.mb-off {
    background-color: black;
}
#matrix-shell {
    font-size: 0;
    height: 108px;
    border: 1px solid red;
    padding: 1px;
}

JavaScript

window.onload = function () {
    renderGrid();
};

function renderGrid() {
    var dispW = document.getElementById('width-in').value
    var dispH = document.getElementById('height-in').value
    //alert("width = " + dispW + ", height = " + dispH);
    var full = Math.floor(dispH / 17);
    var excessH = dispH % 17;
    var excessW = dispW % full;
    var blocksTall = 17;
    var blocksWide = Math.floor(dispW / full);
    var placeBlocks = document.getElementById('matrix-shell');
    var brk = document.createElement("br");

    console.log(blocksWide + "/" + blocksTall);

    for (var j = 1; j <= blocksTall; j++) {

        for (var i = 1; i <= blocksWide; i++) {
            var mb = document.createElement("div");
            //mb.setAttribute("id", "matblock-" + i + "-" + j);
            mb.setAttribute("class", "matrix-block mb-off");
            mb.setAttribute("onClick", "select_mb('" + i + "," + j + "');");
            placeBlocks.appendChild(mb);
        }

        if (j = blocksWide) {
            placeBlocks.appendChild(brk);
        }

    }
}

function select_mb(blockNum) {
    var cur_mb = document.getElementById(blockNum);
    // Turn cell on.
    if (cur_mb.getAttribute("class") == "matrix-block mb-off") {
        cur_mb.style.backgroundColor = "#00FF00";
        cur_mb.setAttribute("class", "matrix-block mb-on");

    } else {
        //Turn cell off.
        cur_mb.style.backgroundColor = "#000";
        cur_mb.setAttribute("class", "matrix-block mb-off");
    }
}