JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<select id="width">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select id="height">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<button id="create">Create Game</button>
<div id="board"></div>
</div>
CSS
.row {
height: 30px;
}
.box-class {
width: 30px;
height: 30px;
display: inline-block;
}
#board div.row:nth-child(odd) span.box-class:nth-child(even) {
background-color: #000;
}
#board div.row:nth-child(odd) span.box-class:nth-child(odd) {
background-color: #f00;
}
#board div.row:nth-child(even) span.box-class:nth-child(even) {
background-color: #f00;
}
#board div.row:nth-child(even) span.box-class:nth-child(odd) {
background-color: #000;
}
JavaScript
$('#create').on('click', function() {
var width = $('#width').val();
var height = $('#height').val();
$('#board').empty();
for (var i = 0; i < height*width; i++) {
if (i % width == 0)
{
$('#board').append('<div class="row" />')
}
$('#board')
.find('div.row:last-child')
.append('<span class="box-class"></span>');
}
var cellWidth = $('#board div.row span.box-class').width();
$('#board').width(width * cellWidth);
});