JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shell-top-wrapper">
    <div id="shell-top">
        <span id="logo">
            Site Name
        </span>
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
    </div>
</div>
<nav id="main-nav">
    Main Menu
</nav>
<div id="shell-content">
    <div class="content">
        Content
    </div> 
</div>

CSS

nav#main-nav {
  position: fixed;
  top: auto;
  height: 100%;
  width: 100px;
    background-color: #f0f0f0;
}
html,
body {
  background-color: #fff;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
#shell-top {
  padding: 29px 20px 20px 29px;
  position: fixed;
  background-color: #f0f0f0;
  z-index: 999;
  width: 100%;
}
#shell-top #logo {
  font-size: 2em;
}
#shell-top-wrapper {
  background-color: #f0f0f0;
  z-index: 999;
  height: 86px;
}
#shell-content {
  margin-top: auto;
  margin-left: 100px;
  background: #FFFFFF;

}
.content {
  width: 100%;

}