JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<table>
    <tr>
        <td class="td-top">td-top</td>
        <td class="td-left">td-left</td>
        <td class="td-center-top-left">td-center-top-left</td>
        <td class="td-center-top-right">td-center-top-right</td>
        <td class="td-right">td-right</td>
        <td class="td-center-bottom">td-center-bottom</td>
    </tr>
</table>

CSS

* {padding:0;margin:0;}
table {
    width:100%;
}
table td {
    border:none;
    float:left;
}
.td-top {
    width:100%;
    height:70px;
    background:red;
}
.td-left,
.td-right {
    width:30%;
    height:400px;
    background:blue;
}
.td-right {
    float:right;
}
.td-center-top-left,
.td-center-top-right {
    width:20%;
    height:200px;    
}
.td-center-top-left {
    background:#121569;
}
.td-center-top-right {
    background:#568954;
}
.td-center-bottom {
    background:#568833;
    width:40%;
    height:200px;
}