JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div class="content">
<div class="tabs-holder">
	<div class="tabs-header">
	<div class="active">تب یک</div><div>تب دو</div><div>تب سه</div>
	</div>
	<div class="tabs-body">
	<div class="tab-content active">
	<p>متن تب شماره یک متن تب شما ره یک متن تب شماره یک  متن تب شماره یک متن تب شما ره یک متن تب شماره یک  متن تب شماره یک متن تب شما ره یک متن تب شماره یک  متن تب شماره یک متن تب شما ره یک متن تب شماره یک  متن تب شماره یک متن تب شما ره یک متن تب شماره یک </p>
	</div>
	<div class="tab-content">
<p>متن تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو </p>
<p> تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو  متن تب شماره دو متن تب شما ره دو متن تب شماره دو </p>
	</div>
	<div class="tab-content">
<p>متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه </p>
<p>متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه شماره سه </p>
<p>متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه </p>
<p>متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه شماره سه </p>
<p>متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه متن تب شماره سه  متن تب شماره سه متن تب شما ره سه...

CSS

html {
	direction:rtl;
}
body{
	background-color:#CCC;
}
.content {
	display:block;
	width:80%;
	margin:25px;
	margin-left:auto;
	margin-right:auto;
	padding:25px;
	background-color:#EEE;
	border-radius:8px;
	border:1px #aaa solid;
}
.tabs-holder {
	display:block;
	padding:5px;
}
.tabs-header {
	display:block;
	margin:0;
	padding:0;
	background-color:transparent;
}

.tabs-header div{
	display:inline-block;
	position:relative;
	padding:8px;
	margin:5px 1px -1px 1px;
	border:1px #aaa solid;
	border-radius:4px 4px 0 0;
	border-bottom-style:none;
	cursor:pointer;
	background-color:#DDD;
	z-index:1;
}
.tabs-header div.active {
	background-color:#FFF;
	z-index:3;
	margin-right:0;
}
.tabs-body {
	background-color:#FFF;
	position:relative;
	display:block;
	z-index:2;
	padding:8px;
	border:1px #aaa solid;
	border-radius:0 0 4px 4px;
}
.tabs-body .tab-content {
	display:none;
}

.tabs-body .tab-content:first-child {
	display:block;
}

JavaScript

$(document).ready(function() {
	$(".tabs-header div").click(function() {
	if(!($(this).hasClass("active"))) { 
	var index = $(this).index();
	var i = parseInt(index)+1;
	var tab = ".tabs-body .tab-content:nth-child("+i+")";
	$(".tabs-header div").removeClass("active");
	$(".tabs-body .tab-content.active").slideUp(500).removeClass("active");
	$(this).addClass("active");
	$(tab).slideDown(500).addClass("active");
	}
	});
});