JSFiddle - React, Tailwind, and code Playground

HTML

<title>HTML Layout</title>

  <body>
    <div id="wraper">
      <header>Header</header>
      <div id="main">
	<div id="nav">sidebar</div>
	<div id="container">container</div>
      </div>
      <footer>Footer</footer>
    </div>
  </body>

CSS

html, body{
  height: 100%;
  margin: 0;
  padding: 0;

}
#wraper{
  display: flex;
  flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  margin: 0 auto;
  min-height: 100%;
  width:89%;

}
header{
  background-color: #3095C7;
  padding:30px 0;
}
#main{
  background-color: #FFEFC4;
  display: flex;
  flex: 1 1 100%;
  height: 100%;
}
#nav{
  background-color: #45A0CD;
  color: #fff;
  flex: 0 0 20%;
}
#container{
  width: 100%;
  padding: 0 30px;
}
footer{
  background-color: #3095C7;
  color: #fff;
  padding: 30px 0;
  text-align:center;
}