JSFiddle - React, Tailwind, and code Playground

HTML

<table class="spuzzle">
    <caption>Sudoku</caption>
    <thead>
        <tr>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>A</th>
            <td class="greenBox" rowspan="3" colspan="3">
                <table class="subTable">
                    <tr>
                        <td></td>
                        <td></td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>5</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td class="goldBox" rowspan="3" colspan="3">
                <table class="subTable">
                    <tr>
                        <td>5</td>
                        <td></td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td class="greenBox" rowspan="3" colspan="3">
                <table class="subTable">
                    <tr>
                        <td></td>
                        <td>7</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>1</td>
                        <td></td>
                    </tr>
...

CSS

table.spuzzle {
    border-collapse:collapse;
}
table.subTable {
    border-collapse:collapse;
}
table.spuzzle td {
    border:5px outset gray;
}
table.spuzzle th {
    font-size:8px;
    color:gray;
}
tbody th {
    height:40px;
}
table.subTable td {
    font-size:20px;
    color:blue;
    width:40px;
    height:40px;
    text-align:center;
    vertical-align:middle;
    border:1px solid black;
}
td.goldBox {
    background-color:gold;
    /*background-image:url("gold.jpg");*/
    background-position:center center;
    background-repeat:no-repeat;
}
td.greenBox {
    background-color:green;
    /*background-image:url("green.jpg");*/
    background-position:center center;
    background-repeat:no-repeat;
}