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="info" 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="info" 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="info" 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;
}

div#info {
    width: 240px;
    padding: 20px;
    height: 320px;
    float: left;
    position: relative;
}

#info.default {
    background: #203E52;
}


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

#info div.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;
}

#info.coral-green {
    background: #F55442;
}

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

JavaScript

$(function() {

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

    $('.default').hover(function() {
        $('.default').stop().animate({
            //backgroundColor: '#CDBF21'
        }, 1);
        $('.default .description').stop().animate({
            color: '#444'
        }, 1);
    }, function() {
        $('.default').stop().animate({
            //backgroundColor: '#203E52'
        }, 1);
        $('.default .description').stop().animate({
            color: '#fff'
        }, 1);
    });


    $('.coral-green-button').click(function() {
        $('#info').switchClass("default", "coral-green", 1);
        $('#info').switchClass("green-blue", "coral-green", 1);
    });

    $('.green-blue-button').click(function() {
        $('#info').switchClass("coral-green", "green-blue", 1);
        $('#info').switchClass("default", "green-blue", 1);
    });

    $('.default-button').click(function() {
        $('#info').switchClass("coral-green", "default", 1);
        $('#info').switchClass("green-blue", "default", 1);
    });

});