JSFiddle - React, Tailwind, and code Playground

by Aamir Shahzad

HTML

<body>
 <form id="form1" runat="server">
   <div class="main">
        <div class="header">      
            This is the header
        </div>            
        <div class="content">
            This is the content
        </div>
        <div class="footer">    
            This is the footer
        </div>
    </div>
 </form>
</body>

CSS

html, form
{
 height: 100%;
}

body
{
 padding: 0px;
 margin: 0px;    
 background-image: url('../back.jpg');     
 height: 100%;
}

.main
{    
 margin: 0px auto;
 width: 100%; 
 height: 100%;
}
.header
{
 float: left;
 width: 100%;
 background-color: Yellow;
 height: 80px;
}
.content
{
 width: 960px;
 margin: 0 auto;
 background-color: Gray;  
 height: auto;
 min-height: 100%; 

}
.footer
{   
 width: 960px;
 background-color: Green;
 margin: 0px auto;  
 height: 50px;    
}