JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
    <div class="cell" id="d1"></div>
    <div class="cell" id="d2"></div>
    <div class="cell" id="d3"></div>
    <div class="cell" id="d4"></div>
    <div class="cell" id="d5"></div>
    <div class="cell" id="d6"></div>
    <div class="cell" id="d7"></div>
    <div class="cell" id="d8"></div>
    <div class="cell" id="d9"></div>
    <div class="cell" id="d10"></div>
    <div class="cell" id="d11"></div>
</div>

CSS

#table {
    position:relative;
    width:400px;
}
.cell {
    position:absolute;
    min-height:25px;
}
#d1 {
    background:lightblue;
    width:300px;
    top:0;
    left:0;
}
#d2 {
    top:0;
    right:0;
    height:75px;
    background:red;
    width:100px;
}
#d3 {
    background:purple;
    width:100px;
    left:0;
    top:25px;
    height:50px;
}
#d4 {
    background:pink;
    width:100px;
    left:100px;
    top:25px;
    height:50px;
}
#d5 {
    background:blue;
    width:100px;
    left:200px;
    top:25px;
}
#d6 {
    background:green;
    width:100px;
    left:200px;
    top:50px;
}
#d7 {
    width:100px;
    left:0;
    top:75px;
    background:lime;
}
#d8 {
    width:100px;
    left:100px;
    top:75px;
    background:yellow;
}
#d9 {
    left:200px;
    top:75px;
    width:200px;
    background:#ccc;
}
#d10 {
    top:100px;
    left:0;
    width:150px;
    background:#cc0033;
}
#d11 {
    width:250px;
    background:#666;
    top:100px;
    left:150px;
}