JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div class="c">
    
    <div class="h">
        header
    </div>
    <div class="m">
        main
    </div>
    <div class="f">
        footer
    </div>
    
    
</div>

CSS

.c {
    background-color: #ccc;
	position: absolute;
	width: 100%;
	height: 100%;
    
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-orient: vertical; 
	-moz-box-orient: vertical;
	box-orient: vertical;
	flex-direction: column;  
}

.h {
   background-color: red; 
    height: 46px;
}

.m {
    background-color: yellow;
    	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex:1 1 auto; 	
}

.f {
    background-color: blue;
    height: 46px;
}

}