JSFiddle - React, Tailwind, and code Playground

by Hannah Kopytko

HTML

<!doctype html>
<body>
    <div class="wrapper">
        <header>
            <div class="topLayer">
                <img src="http://s30.postimg.org/an3bi7krl/metal_Top.png" width="1200" height="373" style="display:block;auto;z-index:5" />
            </div>
            <!-- end of topLayer-->
        </header>
        <!----- end of header-->
        <div class="container">
            <div class="whiteContainer">
                <div id="navi">
                    <!-- the left side of the fork effect -->
                    <div class="l-triangle-top"></div>
                    <div class="l-triangle-bottom"></div>
                    <div class="rec">
                        <ul>
                            <li class="sa">YOUR SA
                                <ul>
                                    <li class="sa">Executive Council</li>
                                    <li class="sa">Bylaws</li>
                                    <li class="sa">Minutes</li>
                                    <li class="sa">Mission/Vision</li>
                                    <li class="sa">Reports</li>
                                    <li class="sa">SIAST Board Rep</li>
                                </ul>
                            </li>
                            <li class="campus">CAMPUS LIFE
                                <ul>
                                    <li class="campus">Blood Clinics</li>
                                    <li class="campus">Campus Policies</li>
                                    <li class="campus">Events</li>
                                    <li class="campus">Fitness Club</li>
                                    <li class="campus">Student Lounge</li>
                                    <li class="campus">Orientation</li>
                                    <li class="campus">Promotions</li>
                                    <li class="campus">Spirit Awards</li>
                                    <li class="campus">S...

CSS

html, body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image:url(../media/images/staticBG.jpg);
    background-attachment:fixed;
    background-position:center center;
    background-repeat:no-repeat;
    margin: 0;
    padding: 0;
}
.container {
    position:absolute;
    margin-top:-373px;
    margin-left:auto;
    margin-right:auto;
    width: 1000px;
    min-height:100%;
    background-color:#0e0e0e;
    z-index:-20;
    left:0;
    /*ALLOWS CONTAINER TO BE CENTERED*/
    right:0;
    /*ALLOWS CONTAINER TO BE CENTERED*/
}
.whiteContainer {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    width: 900px;
    min-height:100%;
    z-index:-10;
    background-color:#e0e7e8;
    left:0;
    /*ALLOWS CONTAINER TO BE CENTERED*/
    right:0;
    /*ALLOWS CONTAINER TO BE CENTERED*/
}
header {
    position:relative;
    z-index:4000;
}
.wrapper {
    min-height:100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -270px;
    /*negative value must be height of footer*/
}
.topLayer {
    margin: 0 auto;
    text-align: center;
    width:1200px;
}
footer, .push {
    height: 270px;
    /*value must be height of footer*/
}
/* ~~ The footer ~~ */
 footer {
    position: relative;
    /* this gives IE6 hasLayout to properly clear */
    clear:both;
}
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
 header, section, footer, aside, article, figure {
    display: block;
}
#navi {
    margin: 210px 10px 10px -80px;
    width: 118%;
}
.rec {
    background: #0e7ab2;
    height: 62px;
    position: relative;
    z-index: 500;
    /* the stack order: foreground */
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 3em 0;
}
ul {
  ...