JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Basic Layout Using Flexbox</h1>
<div class="main-container">
    <header>Header</header>
    <nav>Nav</nav>
    <section>Content</section>
    <footer>Footer</footer>
</div>

<ul>
    <li>Is the <em>&lt;div class="site-content"></em> necessary?</li>
    <li>Here's the same layout but <a href="#" target="_blank">using a simple CSS grid</a></li>
</ul>

SCSS

//Moble-first Media Queries Mixin
@mixin mobile-first($width) {
	@media (min-width: $width) { @content }
}
//Main Container
.main-container {  
  display: flex;
  flex-direction: column nowrap;
  width: 96%;  
  max-width: 1200px;
  margin: auto;
  padding: 0 .83%; //10px ÷ 1200px * 100
}
header {
  flex: 1;
}

nav {
  flex: 1;
}

section {
  flex: 1;
}

footer {
  flex: 1;
}






// Basic styling
.main-container { background: #fff; font-size: 30px; text-shadow:0 1px 1px rgba(black,.5); position: relative;
  &:before { display: block; padding: 0 8px 3px; content: 'Mobile-first'; background: #000; position: absolute; top: 2px; left: 2px; z-index: 1; font-size: 18px;
    @include mobile-first(48em) {
      content: 'Wide';
    }
  }  
}
header { background: #429032; }
nav { background: #2963BD; }
section { background: #c90; }
footer { background: #c03; }
article { background: rgba(black,.3);}

//Give heights to elements for better perception of sections
header, footer { height: 50px; }
section { height: 200px; }
nav { height: 50px;
  @include mobile-first(48em) {
    height: 200px;
  }
}

header, footer, nav, section { display: flex; justify-content: center; align-items: center; }

//Generic styles
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:700);
/*Thick font*/
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
/*Script font*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic);
/*Reading font*/
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  height: 100%;
}

body {
  color: white;
  text-align: center;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  background-image: radial-gradient(#34362e, #272822 80%);
}

ul { text-align: left; }

a, a:visited {
  color: #6d9adf;
}

a:hover {
  color: #c90;
  text-decoration: none;
}