JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="container">
  <div class='top'>1</div>
  <div class='middle'>2</div>
  <div class='bottom'>3</div>
</div>

CSS

body, html {
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -webkit-box-pack: start;
}
.container div {
    -webkit-box-flex: 1;
}

.top { -webkit-box-ordinal-group: 1; background: yellow; }
.middle { -webkit-box-ordinal-group: 2; background: purple; }
.bottom { -webkit-box-ordinal-group: 3; background: salmon; }