JSFiddle - React, Tailwind, and code Playground

by Nanang Mahdaen El Agung

HTML

<div class="wrapper">
  <header>Lorem ipsum dolor</header>
  <section>
      Lorem ipsum dolor sit amet
      <br/>
      Lorem ipsum dolor sit amet
      <br/>
      Lorem ipsum dolor sit amet
      <br/>
      Lorem ipsum dolor sit amet
      <br/>
      Lorem ipsum dolor sit amet
      <br/>
    </section>
  <footer>Lorem dolor</footer>
</div>

CSS

body * {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
}
.wrapper {
    width: 100%;
    min-height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
}

header {
    background: #eee;
}
section {
    min-height: 90%;
    background: #ddd;
    flex: 1;
}
footer {
    background: #ccc;
}