JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="container">
	<div class="left"></div>
	<div class="rest">
		<div class="container top">
			<div class="left"></div>
			<div class="rest">
				<div class="container top">
					<div class="left"></div>
					<div class="rest">
						<div class="container top">
							<div class="left"></div>
							<div class="rest"></div>
						</div>
						<div class="container bottom"></div>
					</div>
				</div>
				<div class="container bottom">
					<div class="left"></div>
					<div class="rest"></div>
				</div>
			</div>
		</div>
		<div class="container bottom">
			<div class="left"></div>
			<div class="rest">
				<div class="container top">
					<div class="left"></div>
					<div class="rest"></div>
				</div>
				<div class="container bottom">
					<div class="left"></div>
					<div class="rest"></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

#main {height:100%;background:#ccc;}

.container {display:table;table-layout:fixed;border-collapse:separate;border-spacing:8px;width:100%;border-radius:8px;}
.container .container {background:#ddd;}
.container .container .container {background:#eee;}
.container .container .container .container {background:#fff;}

.left, .rest {display:table-cell;vertical-align:top;height:100%;}
.left {width:25%;border:1px solid;}

.bottom .left {border:none;background:#fff;border-radius:8px;}