JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<div class="c-layout">
  <header class="c-header">
    <p>A</p>
    <p>B</p>
  </header>
  <div class="c-layout__main">B</div>
  <div class="c-layout__footer">C</div>
</div>

SCSS

.c-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px minmax(max-content, calc(100vh - 60px)) 200px;
  &__header {
    border:  1px solid #000;
  }
  &__main {
    border:  1px solid #000;
  }
  &__footer {
    border:  1px solid #000;
  }
}

.c-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  @media screen and (max-width: 850px) {
    height: 50px;
  }
}