JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer_wrapper">
		<div class="header"><h1>&lt;HEADER&gt;</h1></div>
		<ul class="contents">
			<li class="sideboard"><h1>&lt;SIDEBOARD&gt;</h1></li>
			<li class="document_contents">
				<h2>Page title</h2>
				<span>A few text here.</span>
			</li>
		</ul>
		<div class="footer"><h1>&lt;FOOTER&gt;</h1></div>
	</div>

CSS

*{
	margin:0;
	padding:0;
	list-style:none;
}
html,body{height:100%;}
.outer_wrapper{
	min-height:100%;
	height:100%;
	margin:0 auto;
	max-width:1200px;
	outline:1px solid #ccc;
}
.contents{
	margin:10px 0 10px 300px;
	background:#eee;
}
.sideboard{
	width:290px;
	position:relative;
	left:-300px;
	border:1px dashed #ccc;
	color:black;
}
.document_contents{
	padding:10px;
}
.header{
	background:red;
	color:white;
}
.footer{
	background:green;
	color:white;
}
h1{
	text-align:center;
	color:inherit;
	line-height:100px;
}