JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sudoku</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/Content/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="Styles/Sudoku.css" />
</head>
<body onload="initSudoku()" onresize="">
    <script type="text/javascript" language="JavaScript" src="/Scripts/Sudoku.js"></script>
    <div>
        <div id="tableDiv" style="display:inline-block;">
            <div style="padding-bottom:-30px;background-color:black;display:inline-grid;">
                <div style="display:inline-grid;">
                    <table id="sudokuTable0" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable1" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable2" class="sudokuTable"></table>
                </div>
                <div style="display:inline-grid;">
                    <table id="sudokuTable3" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable4" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable5" class="sudokuTable"></table>
                </div>
                <div style="display:inline-grid;">
                    <table id="sudokuTable6" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable7" class="sudokuTable" style="margin-bottom:4px;"></table>
                    <table id="sudokuTable8" class="sudokuTable"></table>
                </div>
            </div>
        </div>
        <div id="menuDiv" style="display:inline-block;vertical-align:top;">
            <form style="margin-left:30px;">
                <input type="button" class="btn btn-info"...

CSS

body {
    background-color:lightgray;
    font-family:Calibri;
}
/*table{
    border:2px solid black;
    border-collapse:collapse;
}*/
td {
    background-color:white;
    color:black;
    text-align:center;
    border:2px solid black;
}
table.sudokuTable {
    background-color:white;
    text-align:center;
    border:2px solid black;
    /*display:inline-table;*/
}

JavaScript

var difficulty;
var gridSize = 9;
var tableSize = 3;

function initSudoku() {
    var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var sideLength = availableHeight - 20;

    if (sideLength > availableWidth) {
        sideLength = availableWidth;
    }
    sideLength = sideLength - 30; //keep some margin
    $("#tableDiv").css('margin-top', 10);
    $("#menuDiv").css('margin-top', 10);

    var tableWidth = sideLength / tableSize;
    var fontSize = Math.floor(((tableWidth / tableSize) - 10) / 2) + "px";
    var cellWidth = Math.floor(tableWidth / tableSize);
    for (var tableNum = 0; tableNum < gridSize; tableNum++) {
        var table = document.getElementById("sudokuTable" + tableNum);
        table.width = tableWidth + "px";
        table.height = tableWidth + "px";
        table.style.fontSize = fontSize;
        for (var row = 0; row < tableSize; row++) {
            table.insertRow(row);
            for (var col = 0; col < tableSize; col++) {
                var cell = table.rows[row].insertCell(col);
                cell.style.width = cellWidth + "px";
                cell.style.height = cellWidth + "px";
                cell.id = col + (gridSize * row) + 1;
                cell.innerHTML = col + (gridSize * row) + 1;
                cell.addEventListener("click", function () { cellClicked(this.id) });
            }
        }
    }
}

function onResize() {
    var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var sideLength = availableHeight - 20;

    if (sideLength > availableWidth) {
        sideLength = availableWidth;
    }
    sideLength = sideLength - 30; //keep some margin

    var table =...