JSFiddle - React, Tailwind, and code Playground

by iammaddison143

HTML

<body>
  <header>
    HEADER
  </header>

  <main>
    MAIN
  </main>

  <footer>
    FOOTER
  </footer>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: [row1] 60px [row2] 1fr [row3] 30px [row4];
  grid-template-areas:
    "header"
    "main"
    "footer";
}

header {
  background: red;
  
  grid-area: header;
  grid-row: row1;
}


main {
  background: blue;
  
  grid-area: main;
  grid-row: row2;

}

footer {
  color: white;

  background: black;
  
  grid-area: footer;
  grid-row: row3;
}