JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://gitcdn.xyz/repo/wz2cool/css_layout/0.1/dist/layout.min.css">
<div class="vertical-container fill-bottom" style="height: 700px; width:600px; color: white">
<div class="top-panel" style="background:#60D6EA; height: 60px;">
<div class="center-container center-horizontal">
<div class="center-panel">
<h2>Header</h2>
</div>
</div>
</div>
<div class="bottom-panel">
<div class="fill vertical-container fill-top">
<!-- content -->
<div class="fill top-panel">
<div class="fill vertical-container fill-top">
<div class="top-panel">
<div class="fill horizontal-container fill-right">
<div class="left-panel fill-height" style="width: 200px;">
<div class="fill vertical-container fill-bottom">
<div class="top-panel" style="background: #D7C9E3; height: 170px;">
<div class="center-container center-horizontal">
<div class="center-panel">
<h2>Hero</h2>
</div>
</div>
</div>
<div class="bottom-panel" style="background: #9FC467">
<div class="center-container center-horizontal">
...