JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<body>
  <header>  
  </header>

  <div class="holder">
    <div class="one">
      one
    </div>

    <div class="two">
      two
    </div>

    <div class="three">
      three
    </div>

     <div class="four">
      four
    </div>
  </div>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
}

header {
  background: blue;
  height:20%
}
div.holder {
  height:80%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

div.holder > div {
  min-height: 100%;
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}