JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  Head
  <nav>
    Head-Navigation
  </nav>
</header>
<nav>
  Navigation
</nav>
<main>
  Hauptfenster
</main>
<footer>
  Footer
</footer>

CSS

* {
  outline: 1px solid #000;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: minmax(12em, auto) 1fr;
  grid-template-rows: auto 1fr auto;
}

body > header {
   grid-area: header;
}
body > footer {
  grid-area: footer;
}
body > main {
  grid-area: main;
}
body > nav {
  grid-area: sidebar;
}