JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="navbar-top"></div>
    <nav id="navbar-side">
        <p>side bar (228px width plus 20px gap)</p>
    </nav>
    <main id="content">
        <p>Content</p>
    </main>
</body>

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    height: 100%;
    margin: 0;
}
#navbar-top {
    width:100%;
    height:50px;
    position:fixed;
    top:0;
    left:0;
    background-color:#333;
}
#navbar-side {
    width: 228px;
    min-height: 100%;
    background-color: #666;
    position: fixed;
    top: 50px;
    /*pushes content under navbar-top*/
    left:0;
}

#content {
    height: 1000px;
    margin: 50px 0 0 248px;
    background-color:#CCC;
}
/***********************[start of media queries]***********************************************/