JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-header">
  <h1>Company</h1>
</div>
<div class="app-nav">
  <ul>
    <li> Link</li>
    <li> Link</li>
    <li> Link</li>
    <li> Link</li>
  </ul>
</div>
<div class="app-content">
  There is content here.
</div>
<div class="app-footer">
  <p>&copy; Company</p>
</div>

CSS

html, body {height:100%;}
body {
    width:70%;
    margin:0 auto;
    border:solid 1px lime;
        heighT: 100%;
}
.app-nav {
  margin-bottom: 10px;
  border-bottom:solid 3px transparentize($brown2, 0.5);
}
.app-nav li { 
    height:30px;
    display: inline-block;
    cursor: pointer;
    padding:5px;
    box-sizing:padding-box;
    margin: 0 5px;
}
.app-content {
}
.app-footer {
    bottom: 0px;
    width:100%;
    text-align:center;
    border:solid 1px green;
}