JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="everything">
	<div class="menu">
		<div class="d1 active"></div>
		<div class="d2"></div>
		<div class="d3"></div>
	</div>
	<div class="main">
		<div class="home">
			This is some example content.
		</div>

		<div class="about">
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the height when content changes.<br>
			This is just some sample text that's being used to demonstrate animating the...

CSS

body {
		background: -webkit-gradient(linear, left top, right bottom, from(rgba(237,182,165,1)),to(rgba(126,86,112,1)), color-stop(.7,#cc8e85));
		background: -moz-linear-gradient(rgba(237,182,165,1) 0%, rgba(126,86,112,1) 100%);
		width: 100%; height: 100%;
		overflow: hidden;

		z-index: 0;
	}

	.everything {
		position: absolute;
		left: 0px; top: 0px;
		width: 102%; height: 100%;
		background: url(images/transparent_noise.png);
		overflow-y: scroll;

		z-index: 1;
	}

	.menu {
		position: relative;
		left: 0; right: 0; margin: auto;
		top: 50px;
		width: 308px; height: 50px;

		z-index: 999;
	}

	.d1, .d2, .d3 {
		position: relative;
		width: 100px; height: 50px;
		background-color: white;
		margin-bottom: 5px;
		opacity: .5;
		display: inline-block;		

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.d1:hover, .d2:hover, .d3:hover {
		opacity: 1;
	}

	.active {
		opacity: 1;
	}

	.main {
		position: relative;
		left: 0; right: 0; margin: auto;
		top: 100px;
		width: 900px; height: 600px;
		background-color: white;
		box-shadow: 0px 0px 1px gray;

		z-index: 2;
	}

	.home {
		position: relative;
		left: 0px; top: 0px;
		width: 900px;
		overflow: visible; height: 0;

		z-index: 3;
	}

	.about {
		position: relative;
		left: 0px; top: 0px;
		width: 900px;
		overflow: visible; height: 0;

		z-index: 3;
	}

	.contact {
		position: relative;
		left: 0px; top: 0px;
		width: 900px;
		overflow: visible; height: 0;

		z-index: 3;
	}

	.hide {display: none;}

	.footer {
		position: relative;
		left: 0; right: 0; margin: auto;
		top: 110px;
		width: 900px; height: 50px;

		border: 1px dashed green;

		z-index: 999;
	}

JavaScript

$(document).ready(function(){

		var home_page = $('.home');
		var home_contents = home_page.wrapInner('<div>').children(); // wrap a div around the contents
		var home_height = home_contents.outerHeight(); // read the inner divs height
		home_contents.replaceWith( home_contents.html() ); // unwrap the inner div

		var about_page = $('.about');
		var about_contents = about_page.wrapInner('<div>').children(); // wrap a div around the contents
		var about_height = about_contents.outerHeight(); // read the inner divs height
		about_contents.replaceWith( about_contents.html() ); // unwrap the inner div

		var contact_page = $('.contact');
		var contact_contents = contact_page.wrapInner('<div>').children(); // wrap a div around the contents
		var contact_height = contact_contents.outerHeight(); // read the inner divs height
		contact_contents.replaceWith( contact_contents.html() ); // unwrap the inner div

		$(".main").css({height:home_height + 'px'});
		$(".about").hide();
		$(".contact").hide();


		$(".d1").click(function(){
			$(".d1").addClass("active");
			$(".d2, .d3").removeClass("active");
            
            console.log('visible');
            console.log($('.main > div:visible'));

			if($(".about:visible")) {
				$( ".about" ).fadeOut( "slow", function() {
					$(".main").delay(500).animate({height:home_height + 'px'}, 500, function() {
						$(".home").fadeIn( "slow" );
					});
				});
			}
			else if($(".contact:visible")) {
                console.log('contact visible');
				$( ".contact" ).stop().fadeOut( "slow", function() {
					$(".main").stop().delay(500).animate({height:home_height + 'px'}, 500, function() {
						$(".home").stop().fadeIn( "slow" );
					});
				});
			}
			else if($(".home:visible")) {}
		});

		$(".d2").click(function(){
			$(".d2").addClass("active");
			$(".d1, .d3").removeClass("active");

			if($(".home:visible")) {
				$( ".home" ).fadeOut( "slow", function() {
					$(".main").delay(500).animate({height:about_height +...