JSFiddle - React, Tailwind, and code Playground

HTML

<p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p><p>a wdad ad a d</p>
<foot>
        <div id="gradient_transition_bottom"></div>    
        <div id="footer">&nbsp;&nbsp;&nbsp;Lorem ipsum dolor. &copy; 2014</div>
 </foot>

CSS

html, body
{
    min-height:100%;
    position: relative;
}

#gradient_transition_bottom {
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%);
    bottom: 0px;
    height: 122px;
    left: 0;
    margin: 0 auto;
    position: fixed; 
    right: 0;
    width: 80%;
    z-index: 1;
}

#footer {
    background-color: #ccc;
    bottom: 0;
    color: #666;
    font: 100 0.8em "Avenir Next", Raleway, Verdana, Tahoma, sans-serif;
    left: 0;
    position: absolute;
        right: 0;
    text-align: left;
        z-index: 2;
}