JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="rotator homepage-top-ten-carousel clearfix">
    <h3>Read This Now</h3>
        <ul class="entries">
                <li class="first">
            <a href="http://www.mydaily.co.uk/2012/09/06/lauren-laverne-my-stylish-life-amex_n_1861196.html?utm_hp_ref=mydaily">
                <img title="Lauren's Stylish Life" src="http://i.huffpost.com/gen/761017/thumbs/m-LAUREN-LAVERNE-460x345.jpg">
                <p class="caption"><span>Lauren's Stylish Life</span></p>
            </a>
        </li>
                <li class="">
            <a href="http://www.mydaily.co.uk/2012/09/12/kate-middleton-asia-tour_n_1876173.html?utm_hp_ref=mydaily">
                <img title="All White" src="http://i.huffpost.com/gen/768321/thumbs/m-KATEMIDDLETON-140x105.jpg">
                <p class="caption"><span>All White</span></p>
            </a>
        </li>
                <li class="">
            <a href="http://www.mydaily.co.uk/2012/09/11/lana-dey-rey-naked-gq_n_1873781.html?utm_hp_ref=mydaily">
                <img title="Lana Nails It" src="http://i.huffpost.com/gen/767147/thumbs/m-LANA10-140x105.jpg">
                <p class="caption"><span>Lana Nails It</span></p>
            </a>
        </li>
                <li class="">
            <a href="http://www.mydaily.co.uk/2012/09/11/kelly-osbourne-nyfw_n_1874131.html?utm_hp_ref=mydaily">
                <img title="Kelly vs Fashion Priest" src="http://i.huffpost.com/gen/767330/thumbs/m-KELLY-OSBOURNE-140x105.jpg">
                <p class="caption"><span>Kelly vs Fashion Priest</span></p>
            </a>
        </li>
                <li class="">
            <a href="http://www.mydaily.co.uk/2012/09/11/peaches-geldof-wedding_n_1873209.html?utm_hp_ref=mydaily">
                <img title="Blushing Bride" src="http://i.huffpost.com/gen/766671/thumbs/m-PEACHES-GELDOF-140x105.jpg">
                <p class="caption"><span>Blushing Bride</span></p>
            </a>
        </li>
                <li class="">
       ...

CSS

/* [ RESET & COMMON ] */
body {
text-align: center;
/* IE's 'margin:auto' */
font-family: Helvetica, Arial;
font-size: 14px;
line-height: 19px;
color: #2d2d2d;
margin: 0;
}
a                                { color:#2d2d2d; text-decoration: none; }
a:active, 
a:focus                            { outline: 0; }
img                             { border: 0; }
* html #viewport                 { height: 100%; }
#viewport                        { position: relative; width: 980px; margin: 0 auto; padding: 0 3px; text-align: left; background: url('/images/v/mydaily/web/background.png') transparent repeat-y; }
#pageContent                     { width: auto; padding: 0; min-height: 365px; }
.explorer7 #pageContent            { position: relative; z-index: 1; }  /* z-index & position are ncecessary as well as #pageheader due to IE7 z-index Bug on dropdown menu */
.homepagePage #pageContent         { padding-top: 10px; }
#pageContent .column             { float:left; }
#pageContent .column.leftRail     { width:620px;  padding: 20px 0 0 20px;  }
#pageContent .column.rightRail     { width: 300px; padding: 20px 0 5px 20px;  }
#signInStatus                     { display: block; } /* This should override the head.css instruction in place for API reasons */
/* Common Carousel*/
.carousel                                 { left: 0; overflow: hidden; z-index: 2; padding: 0; position: relative; }
.carousel ul                             { list-style: none; /* height: 100%; */ margin: 0; padding: 0; position:relative; overflow:hidden; }
.carousel ul li                         { float: left; margin: 0; overflow: hidden; padding: 0; position: relative; }
.carousel .car-hidden                     { display: none; }
.carousel .car-shown                     { display: block; }
.carousel .car-shown-inline             { display: inline; }
.carousel .car-item-selected             { background: #000; color: #fff; }
/* flap style buttons */
.carousel > .next,
.carousel > .prev                     ...

JavaScript

//S: TOP 10 CALENDAR ROTATOR
        var animationSpeed = 1000, animationInterval = 6000;
        var intervalQueue = setInterval(function(){
            var calendarEntries = $("div.rotator.homepage-top-ten-carousel ul.entries");
            if (calendarEntries.length <= 0) {
                window.clearInterval (intervalQueue);
                return;
            }
            var    firstEntry = calendarEntries.find("li:first-child"),
                firstEntryImg = firstEntry.find("img"),
                secondEntry = firstEntry.next() || calendarEntries.find("li").eq(1),
                secondEntryImg = secondEntry.find("img"),
                largeImgUrl = secondEntryImg.attr("src").replace("140x105","460x345"),
                firstEntryClone = firstEntry.clone().removeAttr("class"),
                firstEntryCloneImg = firstEntryClone.find("img");
                firstEntryCloneImg.attr("src",firstEntryCloneImg.attr("src").replace("460x345","140x105")).css({"width": "140", "height": "105"});
                calendarEntries.append(firstEntryClone);

                $("<img />").attr("src", largeImgUrl).one("load", function() {
                    if (this.complete || typeof this.naturalWidth !== "undefined" || this.naturalWidth !== 0) {
                        firstEntryImg.stop().animate(
                            {"margin-left":"-480px"},
                            {duration: animationSpeed, queue: false}
                        );
                        firstEntry.find("p").stop().animate(
                            {"margin-bottom":"-200px"},
                            {duration: animationSpeed - 500, queue: false}
                        );
                        secondEntryImg.stop().animate(
                            {"margin-left":"-480px","width":"460px","height":"345px"},
                            animationSpeed,
                            function() {
                                var secondEntryClone = secondEntry.clone();
       ...