JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <p>
        <label for=x>x</label>
        <input id=x type=number size=2 min=1 max=20 value=2 />
        <label for=y>y</label>
        <input id=y type=number size=2 min=1 max=20 value=3 />
    </p>
    <p>
        <input type=submit />
    </p>
</form>

CSS

table { background: silver;
        border-collapse: separate;
        border-spacing: 2px; }
td { background: white;
     width: 2em;
     height: 1em; }

JavaScript

document.querySelector("form").addEventListener(
    "submit",
    function( event ){
        "use strict";
        event.preventDefault();
        createTable(
            parseInt(document.getElementById("x").value),
            parseInt(document.getElementById("y").value)
        );
    }
);

function createTable( x, y ){
    var $table = document.createElement("table");
    for (var i = 0; i < y; i++) {
        var $row = $table.insertRow(-1);
        for (var j = 0; j < x; j++) {
            $row.insertCell(-1);
        }
    }
    document.body.appendChild($table);
}