JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-wrap">
		<div class="tabs">
			<div class="tab">tab1</div>
			<div class="tab">tab2</div>
			<div class="tab">tab3</div>
		</div>
		<div class="tab-sections">

			<div class="tab-section">
				<div class="tab-wrap">
					<div class="tabs">
						<div class="tab">tab1</div>
						<div class="tab">tab2</div>
						<div class="tab">tab3</div>
					</div>
					<div class="tab-sections">
						<div class="tab-section">section1</div>
						<div class="tab-section">section2</div>
						<div class="tab-section">section3</div>
					</div>
				</div>
			</div>

			<div class="tab-section">section2</div>
			<div class="tab-section">section3</div>
		</div>
	</div>

CSS

.tab-wrap{
	border: 1px solid red;
	padding: 10px;
}

.tabs{
	margin-bottom: 40px;
	background-color: orange;
}

.tab{
	cursor: pointer;
}

.tab-section{
	background-color: lime;
	margin-bottom: 20px;
}

.tab-section:not(:first-child){
	display: none;
}

JavaScript

$('.tab-wrap').each(function () {
	$(this).children('.tabs').find('.tab').click(function () {
		var i = $(this).index();
		$(this).closest('.tab-wrap').find('.tab-section').hide();
		$(this).closest('.tab-wrap').find('.tab-section').eq(i).show();
		
	})
})