JSFiddle - React, Tailwind, and code Playground

by Matt Erickson

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<div id="colour-switch">
<div class="coral-green-button">Color One</div>
<div class="green-blue-button">Color Two</div>
<div class="default-button">Color Three</div>
</div>

<div id="banner">
                    
            <div id="slide">
            
            <div class="image">
            </div><!-- .image -->
            
            
            <div id="info1" class="default">
            
            <h1>
            Title One
            </h1><!-- .title -->
            
            <div class="description">
            Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
            </div><!--.description-->
        
            <div class="more">
            more
            </div><!-- .more -->
            
            </div><!-- #info -->
            
            </div><!-- #slide -->
            
            
            <div id="slide">
            
            <div class="image">
            </div><!-- .image -->
            
            
            <div id="info2" class="default">
            
            
            <h1>
            Title Two
            </h1><!-- .title -->
            
            <div class="description">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor.            </div><!--.description-->
            
            <div class="more">
            more
            </div><!-- .more -->
            
            </div><!-- #info -->
            
            </div><!-- #slide -->
            
          
            <div id="slide"> 
            
            <div class="image">
            </div><!-- .image -->
            
            
            <div id="info3" class="default">
            
            <h1>
            Title Three            
            </h1>
            
            <div class="description">
Fusce dapibus, tellus ac...

CSS

div#banner {
    width: 960px;
    height: 360px;
    margin: 0 0 0 0;
}

div#slide {
    width: 960px;
    height: 360px;
}

div#slide .image {
    width: 10px;
    height: 360px;
    background: #777;
    float: left;
}

#info1, #info2, #info3 {
    width: 240px;
    padding: 20px;
    height: 320px;
    float: left;
    position: relative;
}

.default {
    background: #203E52;
}


#info1 h1, #info2 h1, #info3 h1
 {
    font: 700 28px/32px sans-serif;
    margin: 0 0 20px 0;
    color: #fff;    
}

.description {
    color: #fff;
    margin: 10px 0 0 0;
}

.description {
    margin: 0 0 0 0;
}

div.more {
    display: block;
    width: 40px;
    text-transform: uppercase;
    text-align: center;
    font: 14px/14px sans-serif;
    color: #203E52;
    padding: 5px;
    background: #fff;
    position: absolute;
    bottom: 20px;
    left: 20px;
}



/*Colour Switcher*/

div#colour-switch {
    font: bold 14px/18px sans-serif;
    top: 30px;
    right: 0;
}

.coral-green {
    background: #F55442;
}

.green-blue {
    background: #01ADB9;
}

JavaScript

$(function() {
    $('#banner').cycle({
        fx: 'fade',
        timeout: 1000,
        pause: 1,
    });

    //$("[id^='info']" is jquery notation for get ids that '^' start with 'info'
    $("[id^='info']").each(function(index, el) { //loop through the info start with divs
        $(el).hover(function() { //on this element bind to the hover
            $(el).stop().animate({
                backgroundColor: '#CDBF21'
            }, 100);
            $(el).find("div.description").stop().animate({
                color: '#444'
            }, 100);
        }, function() {
            $(el).removeAttr('style', 100);
            $(el).find("div.description").removeAttr('style', 100);
        });
    });


    $('.coral-green-button').click(function() {
        $("[id^='info']").each(function(index, el) {
           $(el).switchClass("default", "coral-green", 100);
           $(el).switchClass("green-blue", "coral-green", 100);
        });
    });

    $('.green-blue-button').click(function() {
        $("[id^='info']").each(function(index, el) {
            $(el).switchClass("coral-green", "green-blue", 100);
            $(el).switchClass("default", "green-blue", 100);
        });
    });

    $('.default-button').click(function() {
        $("[id^='info']").each(function(index, el) {
            $(el).switchClass("coral-green", "default", 100);
            $(el).switchClass("green-blue", "default", 100);
        });
    });
});