JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="mainContainer">
        <div class="htmltabs">
            <!-- The tabs -->
            <ul class="tabs">
                <li class="tab1">
                    <a class="tab1 tab">
                        Home    
                    </a>
                </li>
                <li class="tab2">
                    <a class="tab2 tab">
                        About 
                    </a>
                </li>
                <li class="tab3">
                    <a class="tab3 tab">
                        Blog
                    </a>
                </li>
                <li class="tab4">
                    <a class="tab4 tab">
                        Career
                    </a>
                </li>
                <li class="tab5">
                    <a class="tab5 tab">
                        Contact
                    </a>
                </li>
                <li class="tab6">
                    <a class="tab6 tab">
                        News
                    </a>
                </li>
                <li class="tab7">
                    <a class="tab7 tab">
                        Events
                    </a>
                </li>
            </ul>
            <!-- tab 1 -->
            <div class="tab1 tabsContent">
                <div>Home content goes here!</div>
            </div><!-- end of t1 -->
            <!-- tab 2 -->
            <div class="tab2 tabsContent">
                <div>About content goes here!</div>
            </div><!-- end of t2 -->
            <!-- tab 3 -->
            <div class="tab3 tabsContent">
                <div>Blog content goes here!</div>
            </div><!-- end of t3 -->
            <!-- tab 4 -->
            <div class="tab4 tabsContent">
                <div>Career content goes here!</div>
            </div><!-- end of t4 -->
            <!-- tab 5 -->
            <div class="tab5 tabsContent">
                <div>Contact content goes here!</div>
            </div><!-- end of...

CSS

body
{
    margin:0px;
    padding:0px;
    background:#f5f5f5;
    font-family:'PT Sans',sans-serif;
}

.mainContainer
{
    margin:60px auto 0 auto;
    width:600px;
}

.topNav
{
    font-family: 'PT Sans', sans-serif;
    font-weight:bold;
    font-size:12px;
    width:960px;
    margin:0 auto;
    letter-spacing:-1px\9;
}

.tabs li
{
    display:inline;
}

.tabs li a
{
    cursor: pointer;
    padding:26px 13px 11px 12px;
    border:1px solid #cccccc;
    font-family:'PT Sans',sans-serif;
    font-size:13px;
    color:#666666;
    font-weight:400;
    text-transform:uppercase;
}

.tabs .tab-current
{
    padding: 37px 13px 12px 12px;
    border-bottom:0px;
    background:#ffffff;
}

.tabsContent
{
    border:1px solid #cccccc;
    -moz-box-shadow: 3px 3px 5px #cccccc;
    -webkit-box-shadow: 3px 3px 5px #cccccc;
    box-shadow: 3px 3px 5px #cccccc;
    background:#ffffff;
    padding:20px 20px 20px 20px;
    color:#666666;
}

ul.tabs
{
    margin: 0 0 11px 20px;
}

/*Firefox hack*/
@-moz-document url-prefix()
{
    ul.tabs
    {
       margin: 0 0 10px 20px;
    }
}

JavaScript

//This function will run automatically after the page is loaded
$(document).ready(function() 
{
    $('div.htmltabs div.tabsContent').hide();//tabsContent class is used to hide all the tabs content in the start
    $('div.tab1').show(); // It will show the first tab content when page load, you can set any tab content you want - just put the tab content class e.g. tab4
    $('div.htmltabs ul.tabs li.tab1 a').addClass('tab-current');// We will add the class to the current open tab to style the active state
    //It will add the click event on all the anchor tag under the htmltabs class to show the tab content when clicking to the tab
    $('div.htmltabs ul li a').click(function()
    {
        var thisClass = this.className.slice(0,4);//"this" is the current anchor where user click and it will get the className from the current anchor and slice the first part as we have two class on the anchor 
        $('div.htmltabs div.tabsContent').hide();// It will hide all the tab content
        $('div.' + thisClass).show(); // It will show the current content of the user selected tab
        $('div.htmltabs ul.tabs li a').removeClass('tab-current');// It will remove the tab-current class from the previous tab to remove the active style
        $(this).addClass('tab-current'); //It will add the tab-current class to the user selected tab
    });
});