JSFiddle - React, Tailwind, and code Playground

by isuru_nan

HTML

<div id="container">
	<header>
    	
    </header>
    
    <section id="topSection">
    
    </section><!-- end of topSection -->
    
    <section id="bottomSection">
    
    </section><!-- end of bottomSection -->
    
    <footer>
    
    </footer>
    
</div><!-- end of container -->

CSS

#container {
	position:relative;	
}

header {
	position:absolute;
	width:100%;
	height:130px;
	/*background-color:#EDD599;*/
	background-color:#F69;
}

#topSection {
	position:absolute;
	width:100%;
	height:300px;
	background-color:#EDD599;
	top:130px;
	box-shadow:0 8px 12px -6px #000;
}

#bottomSection {
	position:absolute;
	width:100%;
	height:400px;
	background-color:#81512E;
	top:430px;
	/*display:none;*/
}

footer {
	position:absolute;
	width:100%;
	height:100px;
	background-color:#CC6633;
	top:830px;
}