JSFiddle - React, Tailwind, and code Playground

HTML

<!-- loading modernizr script first in HEAD tags -->
<script src="modernizer.js"></script>
 
<!-- All your HTML Content Here -->

<!-- put scripts before closing body tag -->
<script>
   yepnope({
      test : Modernizr.touch, // Returns true if supports touch events
    yep  : [ // These scripts will run on mobile
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js'
      ],
    nope : [ // These scripts will run on desktop
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js',
        jquery.cycle.all.js',
        'domready.js'
        ]
    });
</script>

CSS

#wrapper {
    display: block;
    max-width: 660px;
    max-height: 500px;
    margin: auto;
    position: fixed;
    top: 0%; 
    bottom: 0%; 
    right: 10%;



}
#container {
    display: block;
    float: left;
    height: auto;
    width: 660px;
    overflow: auto;  

}
#prev {
    background-image: url(left%20button.png);

    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;

}

#prev:hover {
    background-image: url(left%20button%20grey.png);
}


#next {
    background-image: url(right%20button.png);
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;
}

#next:hover {
    background-image: url(right%20button%20grey.png);
}
#slider {
    display: block;
    height: 500px;
    width: 500px;
    overflow: hidden;
    float: left;
    position: relative;

}
body {
    background-color: #000;
}

/*background image*/
#fsbg  {   

    width: 100%;
    height: auto;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}
#shadow {
    display: block;
    height: 550px;
    width: 550px;
    margin: auto;
    top: 0%;
    bottom: 0%;
    right: 15%;
    position: fixed;
}

/*header nav bar*/
#table {
    background-color: #000;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 7%;
    z-index: ;
}

/*footer nav bar*/
#table2 {
    background-color: #000;
    margin: 0;
    padding: 10;
    left: 0px;
    bottom: 0px;
    position: absolute ;
    width: 100%;
    height: 5%;
    z-index: 0;
}
textem {
    color: #FFF;
}
.textem2 {
    color: #666;
    text-align: right;
    font-family: "Bebas Neue";
    font-size: 16px;
}


@media screen and (max-width: 500px) {
  #wrapper, #container, #slider {
    width: 100%;
   ...

JavaScript

// This is your external domReady.js file.
$(document).ready(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        prev:   '#prev', 
        next:   '#next', 
        timeout: 0, 
        rev: false 
    });
});