JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="tabsmenu">
<li><a href="#tab1" class="tabtitle active">Tab 1</a></li>
<li><a href="#tab2" class="tabtitle">Tab 2</a></li>
<li><a href="#tab3" class="tabtitle">Tab 3</a></li>
<li><a href="#tab4" class="tabtitle">Tab 4</a></li>
<li><a href="#tab5" class="tabtitle">Tab 5</a></li>
</ul>
<div class="tabscontainer">
<div id="tab1" class="active">Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> </div>
<div id="tab2"> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> </div>
<div id="tab3">Tab3 text</div>
<div id="tab4">Tab4 text</div>
<div id="tab5">Tab5 text</div>
</div>
<noscript>
.tabscontainer div {
display: block;
}
</noscript>
JavaScript
/* магия делается здесь */
$(".tabtitle").click(function(e) {
$(".tabscontainer .active, .tabtitle.active ").removeClass("active");
$($(this).addClass("active").attr("href")).addClass("active");
e.preventDefault();
});