JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab One</a>

        </li>
        <li><a href="#tab-2">Tab Two</a>

        </li>
        <li><a href="#tab-3">Tab Three</a>

        </li>
        <li><a href="#tab-4">Tab Four</a>

        </li>
    </ul>
    <div id="tab-1" class="tab">
         <h3>This is a really simple tabbed interface</h3>

        <p>
            <img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120"
            height="120" class="thumbs" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim.
            Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor
            ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque
            velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem.
            Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum
            a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam.
            Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque
            turpis. Aliquam erat volutpat.
            <br/> <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a> 
        </p>
    </div>
    <div id="tab-2" class="tab">
         <h3>Tab 2</h3>

        <p>
            <img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120"
            height="120" class="thumbs" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim.
            Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor
            ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque
            velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem.
            Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum
            a, aliquam nec
            <br/> <a...

CSS

#tabs li {
    float:left;
    border:1px solid #ddd;
    background-color:#aaa;
    min-width:80px;
    position:relative;
    z-index:10;
}
#tabs li.active {
    background-color:#fff;
    border-bottom:0px;
}
#tabs li a {
    display:block;
    text-decoration:none;
}
.tab {
    clear:both;
    border:1px solid #ddd;
    margin-top:-4px;
    float:left;
    background-color:#fff
}

JavaScript

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });
});