JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
        <div id="header">
            HEADER
        </div>
        <div id="navbar">
            NAVBAR
        </div>
        <div id="main">
            CONTENT
        </div>
        <div id="footer">
            FOOTER
        </div>
    </div>

CSS

/* LAYOUT */
html,
body {
  padding: 0;
  margin: auto;
  height: 1400px;
}
html {
  background: #400101;
}
body {
  padding: 0;
  width: 960px;
  background: #bf0404;
}
#page {
  min-height: 100%;
  height: 100%;
  position: relative;
}
#main {
  padding-bottom: 150px;
}
/* HEADER */
#header {
  /* BASE CODE */
  height: 150px;
  width: 100%;
  /* STYLING */
  background: #590202;
  color: #f2f2f2;
  display: table;
}
/* NAVBAR */
#navbar {
  /* BASE CODE */
  position: fixed;
  top: 0px;
  z-index: 10;
  width: 960px;
  height: 20px;
  /* STYLING */
  background: #590202;
}
/* CONTENT */
#main {
  padding-top: 20px;
}
/* FOOTER */
#footer {
  /* BASE CODE */
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 150px;
  /* STYLING */
  background: #590202;
  display: table;
}