JSFiddle - React, Tailwind, and code Playground

by DiceMasters

HTML

<div class="wrapper">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

CSS

:root {
  --content-height: 100%;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  background-color: pink;
  min-height: 70px;
}

.footer {
  background-color: pink;
  min-height: 140px;
}

.content {
  background-color: gray;
  height: var(--content-height);
}