JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <table>
        <tr>
            <td colspan="3">1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td colspan="2" rowspan="3">7</td>
            <td>8</td>
        </tr>
        <tr>
            <td rowspan="3">9</td>
            <td rowspan="2">10</td>
            <td rowspan="2">11</td>
            <td rowspan="2">12</td>
        </tr>
        <tr>
            
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td colspan="3">15</td>
        </tr>
    </table>
</body>
</html>

CSS

table{
    border-collapse: collapse;
}
tr{
    height: 25px;
    background-color: #adf1c0;
}tr:hover{
    background-color: #7e9;
}
td{
    border: 1px solid #444;
    width: 100px;
    text-align: center;
}