JSFiddle - React, Tailwind, and code Playground

by Suprotim Agarwal

HTML

<h2>A Simple Tab Control</h2>
<ul class="tabHeader">
    <li><a href="#t1">Terms Of Use</a>
    </li>
    <li><a href="#t2">Privacy Policy</a>
    </li>
    <li><a href="#t3">Copyright Info</a>
    </li>
</ul>
<div class="tabContent">
    <div id="t1">Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</div>
    <div id="t2">Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</div>
    <div id="t3">Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.</div>
</div>







<p id="spacer">
    <span> The eBook is available at <a href="http://www.jquerycookbook.com">The Absolutely Awesome jQuery CookBook</a></span>
</p>

CSS

.tabHeader {
    margin: 0;
    padding: 2px 0;
    list-style: none;
}

.tabHeader li {
    display: inline;
    background: #ccc;
    border: 1px solid #888;
    border-bottom: 0;
    margin-right:3px;
    padding: 3px;
}

.tabHeader li.current {
    background: #b5cbe9;
    padding-bottom: 3px;
}

.tabContent {
    border: 1px solid #abdfed;
    padding: 0 12px;
    width: 500px;
}

.tabContent > * {
    display: none;
}

.tabContent > .current {
    display: block;
}


















/* Additional css below. Not related to the demo */
#spacer {
position:fixed;
height:40px;
top:300px;
line-height: 40px;    
font-family: 'Noto Sans', sans-serif;
background-color:#e18728;
}

#spacer span{
     display:inline-block; vertical-align:middle
     line-height: 14px;
}

h2 {
 text-align:left;
}

JavaScript

$('.tabHeader').children().first().addClass('current');
$('.tabContent').children().first().addClass('current');

            
$('.tabHeader li').click(function (e) {
    e.preventDefault();

    $(this).siblings('.current').removeClass('current');
    $(this).addClass('current');

    $('.tabContent').children('.current').removeClass('current');
    $('.tabContent').children().eq($(this).index()).addClass('current');
});