JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#1" class="btn active" rel="1">Item One</a></li>
    <li><a href="#2" class="btn" rel="2">Item Two</a></li>
    <li><a href="#3" class="btn" rel="3">Item Three</a></li>
</ul>

<div class="pane active" rel="1">Pane One</div>
<div class="pane" rel="2">Pane Two</div>
<div class="pane" rel="3">Pane Three</div>

CSS

.btn {font-weight:normal}
.btn.active {font-weight:bold;}
.pane {display:none;border:1px #ccc solid;padding:10px;}
.pane.active {display:block;}

JavaScript

$('.btn').click(function(){
    // grab the rel value of the the link that was clicked
    var thisRel = $(this).attr('rel');
    // remove active class from all .btn
    $('.btn').removeClass('active');
    // add active class to link that was clicked
    $(this).addClass('active');
    // remove all active classes from .pane
    $('.pane').removeClass('active');
    // add class active to pane with the same rel value clicked link
    $('.pane[rel="'+thisRel+'"]').addClass('active');         
});