JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table>
        <tr class="yellow">
            <td colspan="1">1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr class="h-double lightblue">
            <td colspan="2" rowspan="2">4</td>
            <td colspan="3">5</td>
        </tr>
        <tr class="h-double lightgreen">
            <td colspan="2">6</td>
            <td             rowspan="3">7</td>
        </tr>
        <tr class="lightyellow">
            <td             rowspan="5">8</td>
            <td>9</td>
            <td>10</td>            
            <td            rowspan="2">11</td>            
        </tr>
        <tr class="salmon">
            <td colspan="2">12</td>
        </tr>
        <tr class="pink">
            <td            rowspan="3">13</td>
            <td colspan="3">14</td>
        </tr>
        <tr class="tomato">
            <td rowspan="1" colspan="2">15</td>
            <td rowspan="1" colspan="1">16</td>
        </tr>
        <tr class="gold">
            <td rowspan="1" colspan="3">17</td>
        </tr>
    </table>
</body>

CSS

table {
    table-layout: fixed;
}
td {
    width: 30px;
    height: 50px;
    padding: 0 0 0 20px;
    border: 1px solid #666;
}
.h-double td {
    height: 100px;
}

/* some colors for debugging */
.yellow {
    background: yellow;
}
.lightblue {
    background: lightblue;
}
.lightgreen {
    background: lightgreen;
}
.lightyellow {
    background: lightyellow;
}
.salmon {
    background: salmon;
}
.pink {
    background: pink;
}
.tomato {
    background: tomato;
}
.gold {
    background: gold;
}