JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/coda-slider.1.1.1.pack.js"></script>
<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-compatibility.1.2.pack.js"></script>
<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-1.3.pack.js"></script>
<div id="page-wrap">
    <div id="slot-machine-tabs">
           <ul class="tabs">
            <li><a href="#one">Tab One</a></li>
            <li><a href="#two">Tab Two</a></li>
            <li><a href="#three">Tab Three</a></li>
        </ul>
        <div class="box-wrapper">
            <div id="one" class="content-box">
                <div class="col-one col">
                    <img src="http://css-tricks.com/examples/SlotMachineTabs/images/evangeline.jpg" alt="" />
                </div>
                <div class="col-two col">
                    <h3>Kate</h3>
                    <p><a href="http://css-tricks.com">Pellentesque</a> habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
                <div class="col-three col">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
            <div id="two" class="content-box">
                <div class="col-one col">
                    <img src="http://css-tricks.com/examples/SlotMachineTabs/images/elizabeth.jpg" alt="" />
                </div>
                <div class="col-two col">
                    <h3>Juliet</h3>
                   ...

CSS

* {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
body {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    -x-system-font: none;
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("../images/bg.png");
    background-position: 0 0;
    background-repeat: repeat;
    font-family: Georgia,serif;
    font-size: 14px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}
#page-wrap {
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 700px;
}
a {
    text-decoration: none;
}
h3 {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.tabs {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 1px;
}
.tabs li {
    display: inline;
}
.tabs li a {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #EEEEEE;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CCCCCC;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
   ...

JavaScript

var columnReadyCounter = 0;

// This is the callback function for the "hiding" animations
// it gets called for each animation (since we don't know which is slowest)
// the third time it's called, then it resets the column positions
function ifReadyThenReset() {
    
    columnReadyCounter++;
    
    if (columnReadyCounter == 3) {
        $(".col").not(".current .col").css("top", 350);
        columnReadyCounter = 0;
    }

};

// When the DOM is ready
$(function() {
    
    var $allContentBoxes = $(".content-box"),
        $allTabs = $(".tabs li a"),
        $el, $colOne, $colTwo, $colThree,
        hrefSelector = "",
        speedOne = 1000,
        speedTwo = 2000,
        speedThree = 1500;
    
// first tab and first content box are default current
    $(".tabs li:first-child a, .content-box:first").addClass("current");
    $(".box-wrapper .current .col").css("top", 0);
    
    $("#slot-machine-tabs").delegate(".tabs a", "click", function() {
        
        $el = $(this);
        
        if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
        
            // current tab correctly set
            $allTabs.removeClass("current");
            $el.addClass("current");
            
            // optional... random speeds each time.
            speedOne = Math.floor(Math.random()*1000) + 500;
            speedTwo = Math.floor(Math.random()*1000) + 500;
            speedThree = Math.floor(Math.random()*1000) + 500;
        
            // each column is animated upwards to hide
            // kind of annoyingly redudundant code
            $colOne = $(".box-wrapper .current .col-one");
            $colOne.animate({
                "top": -$colOne.height()
            }, speedOne);
        
            $colTwo = $(".box-wrapper .current .col-two");
            $colTwo.animate({
                "top": -$colTwo.height()
            }, speedTwo);
        
            $colThree = $(".box-wrapper .current .col-three");
           ...