JSFiddle - React, Tailwind, and code Playground

by Hernani Mattos

HTML

<div class="cont-tabs">
	

	<div class="tabs">
		<span ><a class="select">Menu tabs 1</a></span>
		<span><a >Menu tabs 2</a></span>
		<span><a >Menu tabs 3</a></span>
	</div>

	<div class="txt-tabs">
		<div > Cont tabs 1</div>
		<div > Cont Tabs 2</div>
		<div > Cont Tabs 3</div>
	</div>

</div>

CSS

.cont-tabs{
		width: 800px;
		height: 900px;
	}

.tabs{
	width: 400px;


}

.tabs span a{
	width: 100px;
	height:40px;
	border:solid 1px #ccc;
	display: table;
}
.tabs span a.select{
	background-color: orange;
}
.text-tabs div.select{
	display: block;
}


.txt-tabs{
	margin-left: 105px;
	margin-top: -126px;
	width: 500px;
	height: 600px;
	border:solid 1px #ccc;
	background-color: #f0f;	

}

JavaScript

$(document).ready(function(){

$("div.txt-tabs div ").hide();
$("div.txt-tabs div:first-child ").show();

$i=0;
$s=0;
$("div.tabs span a").each(function(){

	$(this).attr('href','#tab' + $i++);

})
 $("div.txt-tabs div").each(function(){

	$(this).attr('id', 'tab' + $s++ );

})

$("div.tabs span a").click(function(){

	;
$("div.txt-tabs div").hide();
$('div.txt-tabs div'  + $(this ).attr('href')).show();


});


 
});