JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<body bgcolor="#999999" text="#000000">
    <table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
        <tr>
            <th height="132" align="left" scope="col">&nbsp;</th>
            <th scope="col">
                <div class="spacer" id="spacer"></div>
                <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a>

                </div>
                <hr>
            </th>
            <th scope="col">&nbsp;</th>
        </tr>
        <tr>
            <th width="5%" align="left" scope="col">&nbsp;</th>
            <td width="85%" align="left" valign="top" scope="col">
                <div class="Navigation Bar" id="NavBar">
                    <img src="http://lorempixel.com/g/400/200" width="100" height="50" alt="Navi_Home" />
                    <img src="http://lorempixel.com/g/400/200" width="100" height="50" alt="Navi_Solutions" />
                    <img src="http://lorempixel.com/g/400/200" width="100" height="50" alt="navi_down" />
                </div>
                <div id="slideshowwrapper">
                    <div id="container">
                        <div class="controller" id="prev"></div>
                        <div id="slider">
                            <img src="http://lorempixel.com/g/400/200" width="1000" height="500" alt="Hyatt Apartments" />
                            <img src="http://lorempixel.com/g/400/200" width="1000" height="500" alt="McCommas" />
                            <img src="http://lorempixel.com/g/400/200" width="1000" height="500" alt="Park 4200" />
                            <img src="http://lorempixel.com/g/400/200" width="1000" height="500" alt="Quail Run" />
                            <img src="http://lorempixel.com/g/400/200" width="1000" height="500" alt="Roofdale Roof" />
        ...

CSS

body, td, th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}

JavaScript

$('#slider').cycle({
     fx: 'scrollHorz',
     speed: 'fast',
     next: '#next',
     prev: '#prev'
 });