JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<a href="#" class="tab active" data-tab="t1">One</a>
<a href="#" class="tab" data-tab="t2" >Two</a>
<a href="#" class="tab" data-tab="t3">Three</a>

<div id="contain" class="contain">
    <div id="t1" style="display: block;">
    One Content
    </div>
    <div id="t2" style="display: none;">
    Two Content
    </div>
    <div id="t3" style="display: none;">
    Three Content
    </div>
</div>

CSS

.tab {
        background-color:#7D135A;
        border-radius: 2px 2px 0 0;
        height: 50px;
        width: 90px;
        padding-left:10px;
        padding-right:10px;
        padding-top:5px;
        padding-bottom:0px;
        color:#FFFFFF;
        }

.tab.active {
        background-color:#008000;
        }

     .contain {
     	width:500px;
     	height:200px;
     	border:1px;
		border-style: solid;
	    border-color: #7D135A;
}

JavaScript

$(function () {
    $(".tab").click(function () {
        var tab = $(this),
            dataTab = tab.attr('data-tab');
        tab.addClass('active').siblings('.tab').removeClass('active');
        $('#'+dataTab).show().siblings().hide();
    });
});