JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<div class="tabbar">
    <ul>
        <li><a id="t1" href="#tab1">Tab One</a></li>
        <li><a id="t2" href="#tab2">Tab Two</a></li>
        <li><a id="t3" href="#tab3">Tab Three</a></li>
        <li><a id="t4" href="#tab4">Tab Four</a></li>
    </ul>
</div>
<div class="tabview">
    <div id="tab1" class="tabcontents">Contents 1</div>
    <div id="tab2" class="tabcontents">Contents 2</div>
    <div id="tab3" class="tabcontents">Contents 3</div>
    <div id="tab4" class="tabcontents">Contents 4</div>
</div>

CSS

.tabbar {
    font-size:1em;
    font-family:sans-serif;
    width:100%;
    position: absolute;
    top:0;
    background:#999;
}

.tabbar ul {
    margin:0;
    padding:0;
    float:left;
}

.tabbar ul li {
    display:inline;
}

.tabbar ul li a {
    color:#99a;
    background:#ccc;
    float:left;
    text-decoration:none;
    padding: 8px 16px 8px 16px;
}

.tabbar ul li a:hover {
    background:#eee;
}

.tabon {
    background:#fff !important;
}

.tabview {
    position: absolute;
    top: 40px;
}

.tabcontents {
    padding: 8px 16px 8px 16px;
}

JavaScript

$(document).ready(function() {
    showTabContents('1');
        
    $('div.tabbar ul li a').bind( 'click', function(e){
        showTabContents($(this).attr('href').replace('#tab',''));
    });
});

function showTabContents( tabId ) {
    $('div.tabbar ul li a').removeClass();
    $('#t'+tabId).addClass('tabon');
    $('div.tabview div').hide();
    $('#tab'+tabId).show();
}