JSFiddle - React, Tailwind, and code Playground

by skydivematy

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>

CSS

@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...