JSFiddle - React, Tailwind, and code Playground

HTML

<a id="TOP"></a>

<div id="container">
    <div id="footer_container">
        <div id="footer">
            <div class="footimage">
                <div class="footimageContainer"> <a href="http://site.com/" target="_blank"><img src="http://placehold.it/300x80"/></a>

                    <div class="footmid"> <font color="darkblue">Semi-Transparent Image</font></div>
                    <div class="footmidtwo"> <i>All Rights Reserved.</i></div>
                    <div class="footmidthree"><i>Copyright &copy; 2013 <a href="http://site.com/" target="_blank" style="text-decoration: none"><font color=#ADD8E6>site</font></a>.</i></div>
                </div>
            </div>
            <div class="footleft"> <a class="def" href="javascript: void(0);"><img src="http://4vector.com/i/free-vector-arrow-left-red-clip-art_116739_Arrowleftred_clip_art_small.png" alt="Scroll Left"/></a>

            </div>
            <div class="footright"> <a class="abc" href="javascript: void(0);"><img src="http://4vector.com/i/free-vector-arrow-right-red-clip-art_116733_Arrowrightred_clip_art_small.png" alt="Scroll Right"/></a>

            </div>
        </div>
    </div>

CSS

body {
    margin: 0;
    padding: 0;
}
#container {
    margin: 0 auto;
    /*overflow: auto;*/
    padding: 80px 0;
    width: 100%;
}
#content {
}
#footer_container {
    background: #000000 url('table-images/gradhead.png') repeat-x;
    border: 0px solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}
#footer {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #FFF;
}
#footer .footleft {
    top: 12%;
    left: 2%;
    position: absolute;
    font-size: 20px;
    opacity: 1;
}

#footer .footleft:hover, #footer .footright:hover
{
    opacity: .5;
}

#footer .footright {
    top: 12%;
    right: 2%;
    position: absolute;
    font-size: 20px;
    opacity: 1;
}
#footer .footimage {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -150px;
}
#footer .footimage .footimageContainer {
    position: relative;
    width: 300px;
    height: 80px;
    background-color:black;
}
#footer .footmid {
    position: absolute;
    bottom: 15px;
    right: 5px;
    font-size: 15px;
    height: auto;
}
#footer .footmidtwo {
    bottom: 1px;
    right: 5px;
    position: absolute;
    font-size: 15px;
}

#footer .footmidthree
{
    bottom: 1px;
    left: 5px;
    position: absolute;
    font-size: 15px;
}

JavaScript

$(document).ready(function () {

    for (var i = 0; i < ($("table").children().length); i++) {
        if (readCookie(i)) $($($("table").children()[i]).children()[(readCookie(i))]).toggleClass('selected').siblings().removeClass('selected');
    }
    $("tr").click(function () {
        $(this).toggleClass('selected').siblings().removeClass('selected');
        if (readCookie($(this).parent().index())) {
            if (readCookie($(this).parent().index()) == $(this).index()) eraseCookie($(this).parent().index());
            else {
                eraseCookie($(this).parent().index());
                createCookie($(this).parent().index(), $(this).index(), 1);
            }
        } else createCookie($(this).parent().index(), $(this).index(), 1);
    });

    var currentClass = 0;
    $("#PreviousClass").click(function () {
        if (currentClass > 1) currentClass--;
        $('.class-selector').val("CLASS" + currentClass);
        scrollToAnchor("CLASS" + currentClass);
    });
    $("#NextClass").click(function () {
        if (currentClass != 3) {
            if (currentClass < 3) currentClass++;
            $('.class-selector').val("RACE" + currentClass);
            scrollToAnchor("RACE" + currentClass);
        }
    });

    // gather CLASS info
    var selector = $('.class-selector').on('change', function () {
        var id = this.value;
        if (id !== '') {
            scrollToAnchor(id);
        }
    });
    $('a[id^="CLASS"]').each(function () {
        var id = this.id,
            option = $('<option>', {
                value: this.id,
                text: this.id
            });
        selector.append(option);
    });


    function scrollToAnchor(aid) {
        var aTag = $("a[id='" + aid + "']");
        $('html,body').animate({
            scrollTop: aTag.offset().top - 80
        }, 1);
    }

    $("a.TOPJS").click(function () {
        scrollToAnchor('TOP');
    });

    $("a.KEYJS").click(function () {
       ...