JSFiddle - React, Tailwind, and code Playground

HTML

<div id="org" class="container">
    <div class="left"></div>
    <div class="rest">
        <div class="container">
            <div class="left"></div>
            <div class="rest">
                <div class="container">
                    <div class="left"></div>
                    <div class="rest">
                        <div class="container">
                            <div class="left"></div>
                            <div class="rest"></div>
                        </div>
                        <div class="container"></div>
                    </div>
                </div>
                <div class="container"></div>
            </div>
        </div>
        <div class="container rest"></div>
    </div>
</div>

CSS

#org {height: 400px;background: #ccc;}

.container {padding: 1%;border-radius:8px;}
.container .container {height: 96%;background: #ddd;}
.container .container .container {background: #eee;}
.container .container .container .container {background: #fff;}

.left {float: left;width: 24%;height: 100%;margin-right: 1%;border: 1px solid;} 
.rest {overflow: hidden;height: 100%;}

.container .container:first-child {height: 60%;}
.container .container+.container {height: 38%;margin-top: 2%;}