JSFiddle - React, Tailwind, and code Playground

HTML

<label for="setRows">Rows: </label><input type="text" id="setRows"> <br>
<label for="setCols">Cols: </label><input type="text" id="setCols"> <br>
        <input type="button" id="submit" onclick="buildTable();" value="submit">
            
            
            <hr>
                
                <div id="tableHolder">
                    
                    
                    
                </div>

CSS

input {
    margin: 5px;
}

td {
    background-color: blue;
    width: 20px;
    height: 20px;
}

JavaScript

function buildTable() {
    var rows = document.getElementById("setRows").value;
    var cols = document.getElementById("setCols").value;
	
    var table = "<table>";
    table += "<tbody>";
    
    for (i=0;i<rows;i++) {
     	table += "<tr>";
        
        	for (j=0;j<cols;j++) {
            	table += "<td>&nbsp;</td>";
            }

     	table += "</tr>";   
    }
    
   	table += "</tbody>";
   	table += "</table>";​function buildTable() {
    var rows = document.getElementById("setRows").value;
    var cols = document.getElementById("setCols").value;
	
    var table = "<table>";
    table += "<tbody>";
    
    for (i=0;i<rows;i++) {
     	table += "<tr>";
        
        	for (j=0;j<cols;j++) {
            	table += "<td>&nbsp;</td>";
            }

     	table += "</tr>";   
    }
    
   	table += "</tbody>";
   	table += "</table>";
    
    document.getElementById("tableHolder").innerHTML=table;
}
    
    document.getElementById("tableHolder").innerHTML=table;
}