Pure CSS Tabs

markup.html

<div class="tabs-wrapper">
		<input type="radio" name="tab" id="tab1" class="tab-head" checked="checked"/>
		<label for="tab1">One</label>
		<input type="radio" name="tab" id="tab2" class="tab-head" />
		<label for="tab2">Two</label>
		<input type="radio" name="tab" id="tab3" class="tab-head" />
		<label for="tab3">Three</label>
		<input type="radio" name="tab" id="tab4" class="tab-head" />
		<label for="tab4">Four</label>
		<div class="tab-body-wrapper">
			<div id="tab-body-1" class="tab-body">
				<h1>Tab 1 heading</h1>
				<p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
			</div>
			<div id="tab-body-2" class="tab-body">
				<h1>Tab 2 heading</h1>
				<p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
			</div>
			<div id="tab-body-3" class="tab-body">
				<h1>Tab 3 heading</h1>
				<p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
			</div>
			<div id="tab-body-4" class="tab-body">
				<h1>Tab 4 heading</h1>
				<p>Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.</p>
			</div>
		</div>
	</div>

shortcodes

[div class="tabs-wrapper"]

[input type="radio" name="tab" id="tab1" class="tab-head" checked="checked"/][label for="tab1"]One[/label][input type="radio" name="tab" id="tab2" class="tab-head" /][label for="tab2"]Two[/label][input type="radio" name="tab" id="tab3" class="tab-head" /][label for="tab3"]Three[/label][input type="radio" name="tab" id="tab4" class="tab-head" /][label for="tab4"]Four[/label]

[ul class="tab-body-wrapper"]

[li id="tab-body-1" class="tab-body"][h1]Tab 1 heading[/h1]

[p]Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.[/p]

[/li]

[li id="tab-body-2" class="tab-body"][h1]Tab 2 heading[/h1]

[p]Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.[/p]

[/li]

[li id="tab-body-3" class="tab-body"][h1]Tab 3 heading[/h1]

[p]Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.[/p]

[/li]

[li id="tab-body-4" class="tab-body"][h1]Tab 4 heading[/h1]

[p]Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.[/p]

[/li]

[/ul]

[/div]

style.scss

// Pure CSS Tabs
// http://cssdeck.com/labs/css-responsive-tabs

@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);
@import "compass/css3/transform";

@mixin font($font-size,$line-height,$font-family,$font-weight) {
	font:#{$font-size}/#{$line-height} $font-family;
	font-weight:$font-weight;
}

@mixin keyframe ($animation_name) {
	@-webkit-keyframes $animation_name {
		@content;
	}

	@-moz-keyframes $animation_name {
		@content;
	}

	@-o-keyframes $animation_name {
		@content;
	}

	@keyframes $animation_name {
		@content;
	}
}

@mixin animation ($delay, $duration, $animation) {
	-webkit-animation-delay: $delay;
	-webkit-animation-duration: $duration;
	-webkit-animation-name: $animation;
	-webkit-animation-fill-mode: forwards;

	-moz-animation-delay: $delay;
	-moz-animation-duration: $duration;
	-moz-animation-name: $animation;
	-moz-animation-fill-mode: forwards;

	-o-animation-delay: $delay;
	-o-animation-duration: $duration;
	-o-animation-name: $animation;
	-o-animation-fill-mode: forwards;

	animation-delay: $delay;
	animation-duration: $duration;
	animation-name: $animation;
	animation-fill-mode: forwards;
}

@mixin breakpoint($point) {
	@if $point == big {
		@media screen and (max-width: 1600px){@content;}
	}
	@else if $point == medium {
		@media screen and (max-width: 900px){@content;}
	}
	@else if $point == small {
		@media screen and (max-width: 600px){@content;}
	}
}

@include keyframe(content-opacity) {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@include keyframe(content-rotate-y) {
	from {
		@include transform(rotateY(90deg));
	}
	to {
		opacity:1;
		@include transform(rotateY(0deg));
	}
}

@include keyframe(content-rotate-x) {
	from {
		@include transform(rotateX(90deg));
	}
	to {
		opacity:1;
		@include transform(rotateX(0deg));
	}
}

@include keyframe(content-rotate-both) {
	from {
		@include transform(rotate(90deg));
		@include transform-origin(0% 50%);
	}
	to {
		opacity:1;
		@include transform(rotate(0deg));
		@include transform-origin(0% 50%);
	}
}

@include keyframe(content-pop-out) {
	0% {
		opacity:1;
		@include transform(scale(1)); 
	}
	50% {
		opacity:1;
		@include transform(scale(1.1));
	}
	100% {
		opacity:1;
		@include transform(scale(1));
	}
}

@include keyframe(content-pop-in) {
	from {
		opacity:1;
		@include transform(scale(1.1)); 
	}
	to {
		opacity:1;
		@include transform(scale(1));
	}
}

@include keyframe(content-slide-bot) {
	from {
		top:20px;
		opacity:0;
	}
	to {
		top:0px;
		opacity:1;
	}
}

@include keyframe(content-slide-top) {
	from {
		top:-20px;
		opacity:0;
	}
	to {
		top:0px;
		opacity:1;
	}
}

/* used for wrapper animation after the load of the page */
@include keyframe(show) {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

$tab-head-color:#525252;
$tab-checked-border-color:#B8B63E;
$tab-border-color:#4D4C47;
$tab-text-color:#DBDBD3;
$tab-checked-text-color:#F2F2F2;
$tab-hover-color:#667876;
$tab-body-wrapper-color:#F7EEC6;
$tab-delimiter-line-height:5px;
$tab-label-height:3em;

html {
	background:url(http://distinctionjewelry.com/info/wp-content/uploads/2013/01/blurred-background-10-2000x1250.jpg);
	webkit-font-smoothing: antialiased;
	@include font(1em,1.5em,'Raleway',normal);
}

.tabs-wrapper {
	margin:5% 10% 0 10%;
	input[type=radio] {
		display:none;
	}
	label {
		transition:background 0.4s ease-in-out, height 0.2s linear;
		display:inline-block;
		cursor:pointer;
		color:$tab-text-color;
		width:20%;
		height:$tab-label-height;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
		background:$tab-head-color;
		text-align:center;
		line-height:3em;
		&:last-of-type {
			border-bottom:none;
		}
		&:hover {
			background:$tab-hover-color;
      /*@include transform (translate(0,-0.2em));*/
		}
		@include breakpoint(big){width:15%;}
		@include breakpoint(medium){width:20%;}
		@include breakpoint(small){
      width:100%; 
      display:block; 
      border-bottom:2px solid $tab-border-color;
      border-radius:0;
    }
	}
	@include breakpoint(small){margin:0;}
}

#tab1, #tab2, #tab3, #tab4 {
	&:checked{
		+ label {
			background:$tab-checked-border-color;
			color:$tab-checked-text-color;
		}
	}
}

.tab-body {
	position:absolute;
	top:-9999px;
	opacity:0;
	padding:10px;
}

.tab-body-wrapper {
	background:$tab-body-wrapper-color;
	border-top:$tab-checked-border-color $tab-delimiter-line-height solid;
  border-bottom-right-radius:3px;
  border-bottom-left-radius:3px;
  border-top-right-radius:3px;
	@include animation(0.2s,1.5s,show);
	@include breakpoint(small){
    border:none;
    border-radius:0;
  };
}

#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2 , #tab3:checked ~ .tab-body-wrapper #tab-body-3 , #tab4:checked ~ .tab-body-wrapper  #tab-body-4 {
	position:relative;
	top:0px;
	/* Choose one */
	 @include animation(0.2s,0.8s,content-opacity);
	/* @include animation(0.2s,0.8s,content-rotate-x); */
	/* @include animation(0.2s,0.8s,content-rotate-y); */
	/* @include animation(0.2s,0.8s,content-rotate-both); */
	/* @include animation(0.2s,0.8s,content-pop-in); */
	/* @include animation(0.2s,0.8s,content-pop-out); */
	/* @include animation(0.1s,1s,content-slide-bot); */
	/*@include animation(0.1s,1s,content-slide-top);*/
}