JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>

<body>
    <nav>
        <p>Nav Bar</p>
    </nav>
    <div id="notnav">
        <header>Header</header>
        <div id="notheader">not header</div>
        <!-- <div id="controls">controls</div> -->
    </div>

</body>

</html>

CSS

body{
    background-color: blueviolet;
margin: 0px;
padding: 0px;
display: flex;
align-content: stretch;
height: 100%;
}

html{
    height: 100%;
}

nav{
    background-color: aqua;
    width: 80px;
    height: 100%;

}

main{
    background: yellow;
    width: 100%
}

header{
    height: 100px;
    background-color: teal;
}

#controls{
    background: tomato;

}

#notnav{
    width: 100%;
    background-color: chartreuse;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#notheader{
    background: white;
}