JSFiddle - React, Tailwind, and code Playground

by alessandro_pezzato

HTML

<div class="container">
  <div class="top">
  top
  </div>
  <div class="big">
    <div class="content">
      content
    </div>
  </div>
  <div class="bottom">
  bottom
  </div>
</div>

CSS

.container { display: flex; flex-direction: column; height: 500px; background: #ffeeee; }
.container .top { height: 30; background: #cceeee;}
.container .big { flex-grow: 1; background: #0000ff; height: 100%; }
.container .big .content { height: 100%; background: #ff0000;}
.container .bottom { height: 30; background: #ff66dd; }