JSFiddle - React, Tailwind, and code Playground

HTML

<header class="dialogheader"> Head </header>
    <div class="tab-wrapper">
        <ul class="tabs">
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div class="tab-content">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </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;
}
.tab-wrapper {
	position:absolute; 
	top:50px; 
	bottom:50px; 
	left:0px; 
	right:0px; 
	overflow:hidden;
}
.dialogfooter {
	position:absolute; 
	bottom:0px; 
	left:0px; 
	right:0px; 	
	height:50px;
	overflow:hidden; 
	background-color: #AAAAAA;
}	
UL.tabs {
	position: absolute;	
	top:0px; 
	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:20px; 
	bottom:0; 
	left:0px; 
	right:0px; 
	overflow:auto;
}