JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div id="wrap">
   <div id="main">
      <div id="content">
        <p>main content here</p>
      </div>
      <div id="side">
        <p>side content</p>
      </div>
   </div>
</div>
<div id="footer">
    sticky footer here
</div>

CSS

*
{
    margin:0;
    padding:0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body
{
    height: 100%;
    background: grey;
}
#wrap
{
    min-height: 100%;
    width:100%
}
#main
{
    overflow:auto;
    padding-bottom: 80px; /* must be same height as the footer */
    background: white;
}
#content
{
    background: green;
    float: left;
    width: 80%;
    min-height: 500px;
    text-indent: 5em;
}
#side
{
    background: orange;
    min-height: 500px;
    text-indent: 1em;
}
#footer
{
    position: relative;
    margin-top: -81px; /* negative value of footer height */
    margin-left: 10%;
    margin-right: 10%;
    height: 80px;
    width: 75%;
    clear:both;
    text-align: center;
    font-size: 48pt;
    font-weight: bold;
    
    background: url(bg-image.png) no-repeat #EBEBEB; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#EEFF99) to(#66EE33)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#EEFF99, #66EE33); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#EEFF99, #66EE33); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#EEFF99, #66EE33); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#EEFF99, #66EE33); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*PIE*/

    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 0;
    border-top: 1px solid black;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
   ...