JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>Header</header>
  <main>
      <nav>
          sidebar
      </nav>
      <content>Here comes the content ... </content>
    </main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width:89%;
  margin: 0 auto;
}
header, footer {
  flex-shrink: 0;
}
header{
  background-color: #3095C7;
  padding:30px 0;
}
main {
  display:flex;
  flex: 1 0 auto;
  background-color: #FFEFC4;
}
nav{
  background-color: #45A0CD;
  color: #fff;
  flex: 1 0 20%;
}
content{
  width: 100%;
  padding: 0 30px;
}
footer{
  background-color: #3095C7;
  color: #fff;
  padding: 30px 0;
  text-align:center;
}