HTML:
<div class="tabs_wrapper">
		<ul>
			<li class="tab_menu_item">tab1</li>
			<li class="tab_menu_item">tab2</li>
			<li class="tab_menu_item">tab3</li>
		</ul>
		<div>
			<div class="tab_content_item">
				<h1>tab1</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, aspernatur?</p>
			</div>
			<div class="tab_content_item">
				<h1>tab2</h1>
				<p>Lorem ipsum dolor sit amet, </p>
			</div>
			<div class="tab_content_item">
				<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequuntur incidunt laudantium inventore aperiam sint molestiae, quodi dolorem repellendus asperiores sit facere au?</p>
			</div>
		</div>
	</div>

	SCSS:
	.tabs_wrapper {
	max-width: 500px;
	margin: 0 auto;
	border:1px solid red;
	>ul {
		display: block;
		padding: 10px 0px 0px 0px;
		li.tab_menu_item {
			padding: 5px 10px;
			background-color: #D8D8D8;
		}
		&:after {
			content: '';
			display: table;
			clear:both;
		}
	}
	.tab_content_item {
		background-color: #D8D8D8;
	}
}

JS:
$(document).ready(function(){

	//equal Height for tabs content
	var maxHeight = 0;
	$(".tab_content_item").each(function(){
		if ( $(this).height() > maxHeight ) {
			maxHeight = $(this).height();
		}
	});
	$(".tab_content_item").height(maxHeight);


	//boot styles
	$('.tab_menu_item').each(function(i) {
		$(this).css({"display":"block","float":"left"});
		if (i==0) {
			$(this).css("opacity","1");
		}
		else {
			$(this).css("opacity","0.3");
		}
	});
	$('.tab_content_item').each(function(i) {
		if (i==0) {
			$(this).show();
		}
		else {
			$(this).hide();
		}
	});


	// click styles
	$('.tab_menu_item').click(function(i) {
		var index_selected = $(this).index();
		$('.tab_menu_item').each(function(i) {
			if (i==index_selected) {
				$(this).css("opacity","1");
				$('.tab_content_item').eq(i).show();
			}
			else {
				$(this).css("opacity","0.3");
				$('.tab_content_item').eq(i).hide();
			}
		});
	});
});	 // end /Ready