JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="tabmenu">
<li data-tab="#t1">One</li>
<li data-tab="#t2">Two</li>
</ul>
<div class="tabs">
<div class="tab" id="t1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat id velit quis vestibulum. Nam id orci eu urna mollis porttitor. Nunc nisi ante, gravida at velit eu, aliquet sodales dui. Sed laoreet condimentum nisi a egestas.</p><p>Donec interdum ante ut enim consequat, quis varius nulla dapibus. Vivamus mollis fermentum augue a varius. Vestibulum in sapien at lectus gravida lobortis vulputate sed metus. Duis scelerisque justo et maximus efficitur. Donec eu eleifend quam. Curabitur aliquet commodo sapien eget vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel aliquet nunc, finibus posuere lorem. Suspendisse consectetur volutpat est ut ornare.</p>
</div>
<div class="tab" id="t2">
<p>Donec interdum ante ut enim consequat, quis varius nulla dapibus. Vivamus mollis fermentum augue a varius. Vestibulum in sapien at lectus gravida lobortis vulputate sed metus. Duis scelerisque justo et maximus efficitur. Donec eu eleifend quam. Curabitur aliquet commodo sapien eget vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel aliquet nunc, finibus posuere lorem. Suspendisse consectetur volutpat est ut ornare.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat id velit quis vestibulum. Nam id orci eu urna mollis porttitor. Nunc nisi ante, gravida at velit eu, aliquet sodales dui. Sed laoreet condimentum nisi a egestas.</p>
</div>
</div>
CSS
.tabmenu li {
list-style-type: none;
border: solid 1px gray;
display: inline-block;
}
.tabs {
}
.tab {
display: none;
}
.tab.active {
border: solid 1px gray;
display: block;
}
JavaScript
$('li[data-tab]').on('click', tabClickHandler)
function tabClickHandler(evt) {
$(this.dataset.tab).toggleClass('active')
.siblings().removeClass('active')
}