JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapp'>
  <div class='nav'>nav</div>
  <div class='content'>content</div>
</div>

CSS

.wrapp {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.nav {
  width: 100%;
  height: 50px;
  background: blue;
}

.content {
  height: 100px;
  width: 100px;
  background: green;
  align-self: center;
}