JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="header">
        This is the header
        <hr>
    </div>
        
    <div id="menu">
		<br>
		<b>Menu</b><br>
		<ul>
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
		<br>
    </div>
    <div id="body">
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> end </p>
    </div>
</body>
<footer>
    Footer
</footer>

CSS

html, body { 
	height: 		100%; 
	background:		#E6E6E6;
	margin:			0;
    padding:		0;
}

#header {
    text-align:		center;
	height:			50px;
    position:		static;
    top:			0px;
    z-index:		15;
    background:     #B2B2B2;
}

#body{
    text-align:		left;
    margin-left:	210px;
    margin-right:	200px;
    margin-bottom:	5px;
    background:     #B2B2B2;
}

#menu {
    width:			200px;
    text-align:		left;
    left:			0px;
    position:		absolute;
    background:     #B2B2B2;
}

footer {
	text-align:		center;
    height:			30px;
    position:		relative;
    bottom:			0; 
    width:			100%;
    background:     #B2B2B2;
}