JSFiddle - React, Tailwind, and code Playground

by Mojtaba Sabeti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="tabs">
	<li class="active">علی</li>
	<li>تقی</li>
	<li>نقی</li>
</ul>
<ul class="tab-content">
	<li class="active">محتویت تب علی</li>
	<li>محتویات تب تقی</li>
	<li>محتویات تب نقی</li>
</ul>

CSS

.tab-content li:not(.active) {
    display: none;
}
.active {
    border: 1px solid;
}

JavaScript

$(function(){
	$('.tabs li').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		$('.tab-content li').eq($(this).index()).addClass('active').siblings().removeClass('active');
	});
});