JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer-holder">
    <div id="footer-container">
        <footer>
            <ul id="footer-main-menu">
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/privacy">Privacy</a></li>
                <li><a href="/terms">Terms</a></li>
            </ul>
        </footer>
    </div>
</div>

CSS

#footer-holder
{
    color: #333;
    width: 100%
    clear: both;
    position: fixed;
    filter: alpha(opacity=10);
    opacity: 0.31;
    height: 30px;
}

#footer-container
{
    padding-top: 10px;
}
ul#footer-main-menu
{
    margin: 0;
    padding: 0 0.7em;
    white-space: nowrap;
}
ul#footer-main-menu li
{
    list-style-type: none;
    display: inline-block;
    * display: inline;
}
ul#footer-main-menu li a
{
    color: #333;
    padding: 0 5px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

$("#footer-holder").mouseover(function(){
        $(this).stop().fadeTo("slow",1.00);
    });
    $("#footer-holder").mouseout(function(){
        $(this).stop().fadeTo("slow",0.01);
    });