<div class="tab">

	<ul class="tabs">
		<li><a href="#">Tab01</a></li>
		<li><a href="#">Tab02</a></li>
		<li><a href="#">Tab03</a></li>
	</ul> <!-- / tabs -->

	<div class="tab_content">

		<div class="tabs_item">
			<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png">
			<h4>Tab 01 Neque ipsum dolor.</h4>
			<p>Consectetur adipisicing elit. Neque, repellat facilis totam ab eos distinctio sint atque maiores! Dignissimos, molestiae, rem accusantium iure vitae voluptatum voluptas repudiandae deserunt dolore quis! Quisquam mollitia eius sed.</p>
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
			<img src="https://cdn.dribbble.com/users/545884/screenshots/3576036/liberosis_--_10.png">
			<h4>Tab02 Maiores, suscipit</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit, eaque asperiores neque numquam nam possimus dolorem ipsa aspernatur reiciendis?</p>
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
			<img src="https://cdn.dribbble.com/users/545884/screenshots/3557299/mo-t.png">
			<h4>Tab03</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, excepturi, minima, corporis deserunt quia quae sit officiis labore inventore autem a delectus consequuntur voluptatem modi eligendi similique sed nam vitae.</p>
		</div> <!-- / tabs_item -->
		
	</div> <!-- / tab_content -->
</div> <!-- / tab -->

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

// color
$color: blue;

// TAB ~~~~~~~~~~~~~~~ (.)(.)
.tab {
	padding-top: 50px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	background: #fff;
	width: 70%;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;
	line-height: 1.5;
	font-weight: 300;
	color: #888;
	-webkit-font-smoothing: antialiased;
}

.tabs {
	display: table;
	position: relative;
	overflow: hidden;
	margin: 0;
	width: 100%;
	
	li {
		float: left;
		line-height: 38px;
		overflow: hidden;
		padding: 0;
		position: relative;
	}

	a {
		background-color: #eff0f2;
		border-bottom: 1px solid #fff;
		color: #888;
		font-weight: 500;
		display: block;
		letter-spacing: 0;
		outline: none;
		padding: 0 20px;
		text-decoration: none;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		border-bottom: 2px solid $color;
	}
}

.tabs_item {
	display: none;
	padding: 30px 0;

	h4 {
		font-weight: bold;
		color: $color;
    font-size: 20px;
	}

	img {
		width: 200px;
		float: left;
		margin-right: 30px;
	}

	&:first-child {display: block;}
}

.current a {
	color: #fff;
	background: $color;
}

// END TAB ~~~~~~~~~~~~~~~ (.)(.)

$(document).ready(function() { 

	(function ($) { 
		$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
		
		$('.tab ul.tabs li a').click(function (g) { 
			var tab = $(this).closest('.tab'), 
				index = $(this).closest('li').index();
			
			tab.find('ul.tabs > li').removeClass('current');
			$(this).closest('li').addClass('current');
			
			tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
			tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
			
			g.preventDefault();
		} );
	})(jQuery);

});