JSFiddle - React, Tailwind, and code Playground

by Bartek Legięć

HTML

<div class="wrapper">
  <header>Header</header>
  <main>Main</main>
  <nav>Nav</nav>
  <footer>Footer</footer>
  <div class="start">Start</div>
  <div class="end">End</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: 1fr 50vw 20vw 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header header" "start main nav end" "footer footer footer footer";
  min-height: 100vh;
  font-size: 24px;
}

header {
  grid-area: header;
  background: pink;
}
  
main {
  grid-area: main;
  background: lightgreen;
}
  
footer {
  grid-area: footer;
  background: darkblue;
}
  
nav {
  grid-area: nav;
  background: orange;
}

body {
  margin: 0;
  font-family: "Noto Serif";
  font-size: calc(16px + .25vw);
}

header, footer {
  height: 64px;
}
  
.wrapper * {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

footer {
  color: #fff;
}

.start {
  background: violet;
}

.end {
  background: darkred;
}