JSFiddle - React, Tailwind, and code Playground

by Hirengabu

HTML

<div class="main-container">

    <div class="header">
      <span>Fixed Header (content under here)</span>
    </div>

    <div class="middle-contant">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit suscipit malesuada. 
          Donec lobortis, quam eu viverra lobortis</p>

    </div>

    <div class="footer">
      <span>Sticky footer!</span>
    </div>

</div>

CSS

html {
  height: 100%;
}

body {
  margin: 0;
  padding:0;
  line-height: normal;
  height: 100%;
}

.header {
  background:#4a90e2;
  padding: 16px 0 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-container {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #f1f1f1;
}

p {
  padding:0 20px;
}

 .footer {
   background: #4a90e2;
   padding: 11px 25px;
   grid-row-start: 3;
   grid-row-end: 3;
   z-index: 1;
}