JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="tabs">
    <ul>
        <li> <a href="#link1" title="Link 1" class="sprite"><span class="sprite">Link 1</span></a>

        </li>
        <li> <a href="#link2" title="Link 2" class="sprite"><span class="sprite">Link 2</span></a>

        </li>
        <li> <a href="#link3" title="Link 3" class="sprite"><span class="sprite">Link 3</span></a>

        </li>
    </ul>
    <div class="tab-content" id="link1">
         <h4>bla bla 1</h4>

        <img src="http://4gifs.com/gallery/d/124178-1/Guinea_pigs_nomrace.gif" alt="Schweinchen" width="324" height="244" />
    </div>
    <div class="tab-content" id="link2">
         <h4>bla bla 2</h4>

        <img src="http://farm4.static.flickr.com/3272/2682867554_aa3dbfc5b8.jpg?v=0" alt="Hörnchen" width="500" height="333" />
    </div>
    <div class="tab-content" id="link3">
         <h4>bla bla 3</h4>

        <img src="http://img515.imageshack.us/img515/5271/19368.jpg" alt="Timon und Pumba" width="500" height="357" />
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    background:#666;
    color:#fff
}
h2 {
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    margin:20px 0 0 0;
    padding: 0 0 0 15px
}
img {
    border: none
}
a img {
    border:0
}
a, a:visited {
    color: #7BAEDB
}
a:hover {
    text-decoration:none
}
p {
    font-weight:normal;
    margin:15px
}
/* Buttons-------------------------------*/
 .awesome, .awesome:visited {
    background: #7DAFDB;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    cursor: pointer;
    font-size:12px
}
.awesome:hover {
    background: #87B7FF
}
.awesome:active {
    top: 1px
}
/*- Tabs--------------------------- */
 .sprite {
    background:url(quick_sprite.png) no-repeat
}
.tabs {
    height:22px;
    font-size:93%;
    line-height:normal;
    margin:0;
    padding:10px 10px 0 28px;
    list-style:none
}
.tabs li {
    display:inline;
    margin:0;
    padding:0
}
.tabs a {
    float:left;
    background-position: left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none
}
.tabs span {
    float:left;
    display:block;
    background-position: right -84px;
    padding:5px 15px 4px 6px;
    color:#FFF
}
.tabs a:hover span {
    color:#FFF
}
.tabs a:hover, #tabs .active {
    background-position:0 -42px;
}
.tabs a:hover span, #tabs .active span {
    background-position:right -126px
}
.tab-content {
    color:#fff;
    border:1px solid #fff;
    margin:0 10px 0 25px;
    width:600px;
    padding:10px
}

JavaScript

(function ($) {
    var context = $('div.tabs')
    var tl = $('ul li a', context);
    var tc = $('div.tab-content', context);

    $(tl[0]).addClass('active');
    tc.hide();
    $(tc[0]).show();

    context.on('click', 'li', function (e) {
        var $this = $(this),
            activeTab = $this.find("a").attr("href");
            
        tl.removeClass('active');
        $this.find("a").addClass('active');
        tc.hide();

        
        $(activeTab).show();
        e.preventDefault();
    });
})(jQuery);