JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <header>Header</header>
  <main>
    <div class="panel1">
      <div class="panel-content">
        Content
      </div>
    </div>
    <div class="panel2">
      <div class="panel-content">
        Content
      </div>
    </div>
  </main>
  <footer>Sticky Footer</footer>
</div>

CSS

html, body { margin: 0; }

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  display: flex;
  background-color: #eee;
}

.panel1, .panel2 {
  background-color: brown;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-content {
  background-color: #ccc;
  padding: 3em;
}

header, footer {
  background-color: #ccc;
  padding: 1em;
  text-align: center;
}