JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="tab-container">  
    <ul class="tab-menu">  
        <li id="html" class="active">HTML</li>  
        <li id="css">CSS</li>  
        <li id="javascript">Javascript</li>  
    </ul>  
    <div class="clear"></div>  
    <div class="tab-top-border"></div>
    <div id="html-tab" class="tab-content active">
        <h1>HTML</h2>
        <p>This links to <a href="http://en.wikipedia.org/wiki/1995">1995</a> when HTML made sense.</p>
    </div>
    <div id="css-tab" class="tab-content">
        <h1>Stylin&#39;</h1>
        <p>You should check out the <a href="http://www.csszengarden.com/">Zen Garden</a>.</p>
    </div>
    <div id="javascript-tab" class="tab-content">  
        <h1>Javascript ninjas</h1>
        <p>We will teach you how to be a web <a href="http://www.amazon.com/Technical-University-Recruiting-Careers/b?ie=UTF8&node=239379011">ninja</a>. Your Javascript skills
        will actually be so extreme you will be forbidden from leaving
        the country due to arms export laws.</p>
    </div>
</div>

CSS

body{
    background: #fff;
    margin:0;
}
.clear{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}
a {
    text-decoration: none;
}
#tab-container{
    font-family: Arial,  Verdana, Helvetica, sans-serif;
    font-size: 12px;
    line-height:14px;
    margin: 3em auto;
    width: 500px;
    overflow: hidden;
}
#tab-container ul{
    list-style: none;
    list-style-position: outside;
    width: 100%;
}
#tab-container ul.tab-menu li{
    display: block;
    float: left;
    position: relative;
    font-weight: 700;
    padding: 5px 10px 5px 10px;
    background: #eee;
    border: 1px solid #ddc;
    border-bottom: none;
    border-width: 1px;
    color: #999;
    cursor: default;
    height: 14px;
    margin-bottom: -1px;
    margin-right: 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#tab-container ul.tab-menu li.active{
    background: #fff;
    color: #0088CC;
    height: 15px;
    border-bottom: 0;
}
.tab-top-border {
    border-bottom: 1px solid #d0ccc9;
}
.tab-content{
    margin: 0 auto;
    background: #efefef;
    background: #fff;
    border: 1px solid #ddc;
    border-top-style: none;
    text-align: left;
    padding: 10px;
    padding-bottom: 20px;
    font-size: 11px;
    display: none;
    height: 250px;
}
#tab-container div.active{
    display: block;
}
.tab-content h1{
    line-height: 1em;
    height: 28px;
    font-size: 22px;
}

JavaScript

$(document).ready(function(){
    var activeTabIndex = -1;
    var tabNames = ["html","javascript","css"];

    $(".tab-menu > li").click(function(e){
        for(var i=0;i<tabNames.length;i++) {
            if(e.target.id == tabNames[i]) {
                activeTabIndex = i;
            } else {
                $("#"+tabNames[i]).removeClass("active");
                $("#"+tabNames[i]+"-tab").css("display", "none");
            }
        }
        $("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
        $("#"+tabNames[activeTabIndex]).addClass("active");
        return false;
    });
});