JSFiddle - React, Tailwind, and code Playground

HTML

<table>
            <tr>
                <td rowspan="2" class="one">1</td>
                <td colspan="2" class="two">2</td>
                <td class="three">3</td>
            </tr>
            <tr>
                <td rowspan="3" class="four">4</td>
                <td colspan="2" rowspan="2" class="five">5</td>
            </tr>
            <tr>
                <td rowspan="2" class="six">6</td>
            </tr>
            <tr>
                <td class="seven">7</td>
                <td class="eight">8</td>
            </tr>
            <tr>
                <td colspan="2" class="nine">9</td>
                <td colspan="2" class="ten">10</td>
            </tr>
        </table>

CSS

table{
width:100%;
height:100%;
border-spacing:5px;
}

td{
border:1px solid #000;
height:100px;
}

.one{
height:200px;
background:green;
}

.two{
background:#145e9d;
}

.three{
background:#b2fffe;
}

.four{
background:#fe8a01;
}

.five{
background:yellow;
}

.six{
background:#d7bf77;
}

.seven{
background:#01fe90;
width:20%;
}

.eight{
background:#0196fe;
width:20%;
}

.nine{
background:#ef01fe;
}

.ten{
background:lime;
}