JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="tablist" role="tablist" aria-live="polite">
	<div class="tab" role="tab button" aria-selected="true">Tab 1</div>
	<div class="tab" role="tab button">Tab 2</div>
	<div class="tab" role="tab button">Tab 3</div>
</div>
<div class="tabpanels">
	<div class="panel active">
		Panel 1
	</div>
	<div class="panel">
		Panel 2
	</div>
	<div class="panel">
		Panel 3
	</div>
</div>

SCSS

.tablist {
}

.tab {
	display: inline-block;
	padding: 10px 20px;
	
	&[aria-selected="true"] {
		text-decoration: underline;
	}
}

.panel:not(.active) {
	display: none;
}

JavaScript

$('.tab').on('click', function(){	
	$('.panel')
	.eq(
		$(this)
		.attr('aria-selected', true)
		.siblings()
		.attr('aria-selected', false)
		.end().index()
	).addClass('active')
	.siblings()
	.removeClass('active');
});