JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<div id="container">
    <h1>Harley Davidson Motor Cycles</h1>
    <div id="slideshow">
        <ul id="nav">
            <li id="prev"><a href="#">Previous</a></li>
            <li id="next"><a href="#">Next</a></li>
        </ul>
    
        <ul id="slides">
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
            <li><img src="http://line25.com/wp-content/uploads/2010/slideshow/demo/images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
        </ul>
    </div>
</div>

CSS

body, h1, ul, li {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #e8dbcb url(images/bg-texture.jpg);
}

#container {
    width: 1095px; margin: -40px auto;
    position: relative;
}

h1 {
    width: 262px; height: 226px; margin: 0 auto; position: relative; top: 100px;
    background: url(images/harley-logo.png); text-indent: -9999px; z-index: 10;
}

div#slideshow {
    width: 1083px; height: 518px; padding: 15px 0 0 12px;
    background: url(images/border.png);
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */ 
    position: relative; z-index: 5;
}
    div#slideshow ul#nav {
        display: none;
        list-style: none;
        position: relative; top: 210px; z-index: 15;
    }
        div#slideshow ul#nav li#prev {
            float: left; margin: 0 0 0 40px;
        }
        div#slideshow ul#nav li#next {
            float: right; margin: 0 50px 0 0;
        }
        div#slideshow ul#nav li a {
            display: block; width: 80px; height: 80px; text-indent: -9999px;
        }
            div#slideshow ul#nav li#prev a {
                background: url(images/prev.png);
            }
            div#slideshow ul#nav li#next a {
                background: url(images/next.png);
            }

    div#slideshow ul#slides {
        list-style: none;
    }
        div#slideshow ul#slides li {
            margin: 0 0 20px 0;
        }

a {outline: none; }

JavaScript

/*  * jQuery Cycle Plugin (with Transition Definitions)  * Examples and documentation at: http://jquery.malsup.com/cycle/  * Copyright (c) 2007-2010 M. Alsup  * Version: 2.86 (05-APR-2010)  * Dual licensed under the MIT and GPL licenses:  * http://www.opensource.org/licenses/mit-license.php  * http://www.gnu.org/licenses/gpl.html  * Requires: jQuery v1.2.6 or later  */ (function($){var ver="2.86";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);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(opts2.currSlide,opts2.nextSlide,opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,!opts2.rev);},startTime);}});};function...