JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            $(document).ready(function () {
            $('.slideshow').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="top-feature">
                    <div class="slideshow">
                        <img alt="image1" src="http://i.imgur.com/rg3MR.png" />
                        <img alt="image2" src="http://i.imgur.com/UWOdd.png" />
                        <img alt="image3" src="http://i.imgur.com/rK8I9.png" />
                        <img alt="image4" src="http://i.imgur.com/BNAiA.png" />
                        <img alt="image5" src="http://i.imgur.com/l3dnV.png" />
                        <img alt="image6" src="http://i.imgur.com/O2q3Q.png" />
                    </div>
                    <div id="promo">
                    </div>
                </div>
                <div id="feature-headerline">
                </div>    
            </div>
            <div>
                <a href="http://apycom.com/"></a>
            </div>
        </form>
    </body>
</html>

CSS

*{ margin:0; padding:0 }
body
{
    /*background: url("/images/damask-back.jpg") repeat scroll 0 0 #423624;*/
    background: url("/images/blueback1.jpg") repeat-x scroll 0 0 transparent;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 62.5%;
    /*height: 50%;*/
    height: 1000px;
}
#global-wrap {
    width: 100%;
    /*margin: 5px auto;*/
}
#top-wrap {
    height: 126px;
    width: 940px;    
    /*background-color: Yellow;*/
    margin: 5px 0 0 0;
}
#head-logo {
    background: url("/images/logo3.png") no-repeat scroll 0 0 transparent;
    /*background-color: Green;*/
    height: 126px;
    width: 214px;
    margin: 0px 0 0 58px;
    position: absolute;
    z-index: 100;
}
#submenu1 {
    border: 0 solid #000000;
    color: #FFFFFF;
    float: right;
    font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
    font-size: 1.6em;
    height: 20px;
    padding: 10px 0 0;
}
#FreeEstimate {
    font-size: 1em;
}
#submenu2 {
    border: 0 solid #000000;
    color: #FFFFFF;
    float: right;
    font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
    font-size: 2em;
    height: 30px;
    padding: 5px 0 0;
}    
#navigation-primary {
    margin: 10px 0 0 276px;
    position: absolute;  
}

#global-inner {
    background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
    font-family: Arial;
    font-size: 1.2em;
    margin: 15px 0 0 60px;
    /*overflow: visible;*/
    text-align: left;
    width: 880px;
    height: 800px;
    /*position: absolute;*/
}
#global-inner .topleft {
    background: url("/images/main_left_top_corner.jpg") no-repeat scroll left top transparent;
    float: left;
    height: 9px;
    width: 9px;
}
#global-inner .topright {
    background: url("/images/main_right_top_corner.jpg") no-repeat scroll right top transparent;
    float: right;
    height: 9px;
    width: 9px;
}
#global-inner .bottomleft {
    background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
    float: left;
  ...

JavaScript

/*
 * jQuery Cycle Plugin (with Transition Definitions)
 * Examples and documentation at: http://jquery.malsup.com/cycle/
 * Copyright (c) 2007-2010 M. Alsup
 * Version: 2.94 (20-DEC-2010)
 * Dual licensed under the MIT and GPL licenses.
 * http://jquery.malsup.com/license.html
 * Requires: jQuery v1.2.6 or later
 */
(function($) {
    var ver = "2.94";
    if ($.support === undefined) {
        $.support = {
            opacity: !($.browser.msie)
        };
    }
    function debug(s) {
        if ($.fn.cycle.debug) {
            log(s);
        }
    }
    function log() {
        if (window.console && window.console.log) {
            window.console.log("[cycle] " + Array.prototype.join.call(arguments, " "));
        }
    }
    $.fn.cycle = function(options, arg2) {
        var o = {
            s: this.selector,
            c: this.context
        };
        if (this.length === 0 && options != "stop") {
            if (!$.isReady && o.s) {
                log("DOM not ready, queuing slideshow");
                $(function() {
                    $(o.s, o.c).cycle(options, arg2);
                });
                return this;
            }
            log("terminating; zero elements found by selector" + ($.isReady ? "" : " (DOM not ready)"));
            return this;
        }
        return this.each(function() {
            var opts = handleArguments(this, options, arg2);
            if (opts === false) {
                return;
            }
            opts.updateActivePagerLink = opts.updateActivePagerLink || $.fn.cycle.updateActivePagerLink;
            if (this.cycleTimeout) {
                clearTimeout(this.cycleTimeout);
            }
            this.cycleTimeout = this.cyclePause = 0;
            var $cont = $(this);
            var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children();
            var els = $slides.get();
            if (els.length < 2) {
                log("terminating; too few slides: " + els.length);
      ...