JSFiddle - React, Tailwind, and code Playground

HTML

<header class="dialogheader"> 
		Head
	 </header> 	 
		<ul class="tabs">
			<li>Tab 1</li>
			<li>Tab 2</li>
			<li>Tab 3</li>
		</ul>
		<div class="tab-content">
			<p>Content first</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content last</p>
		</div>	
	 <footer class="dialogfooter"> 
		Footer
	 </footer>

CSS

BODY {
	height:100%; 
}
.dialogheader {
	position:absolute; 
	top:0px; 
	left:0px; 
	right:0px;
	height:50px; 
	overflow:hidden; 
	background-color: #EFEFEF;
}
.dialogfooter {
	position:absolute; 
	bottom:0px; 
	left:0px; 
	right:0px; 	
	height:50px;
	overflow:hidden; 
	background-color: #EFEFEF;
}	
UL.tabs {
	position: absolute;	
	top:50px; 
	left:0px; 
	height:20px; 
	overflow:hidden; 	
	margin: 0;
	padding: 0;	
}
UL.tabs LI{
	list-style-type: none;
	float: left;	
	margin: 0 2px 0 0;
	padding: 0 15px 0 15px;
	background-color: #CCCCCC;	
}
.tab-content {
	position:absolute; 
	top:70px; 
	bottom:50px; 
	left:0px; 
	right:0px; 
	overflow:auto;
}