JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<header>
    <nav>
        <ul>
            <li><a href="#" class="resume"><p>Resume</p></a> </li>
            <li><a href="#" class="portfolio"><p>Portfolio</p></a></li>
        </ul>
    </nav>
    <div class="content" id="resume">
        	<h1>Resume</h1>

        <p>Bacon ipsum dolor sit amet corned beef tail ground round, capicola swine
            spare ribs drumstick venison short loin. Swine pastrami salami spare ribs
            hamburger chicken tenderloin venison andouille. Tail bacon beef ribs ball
            tip swine tenderloin strip steak corned beef shank cow turducken tri-tip.
            Tongue t-bone jowl, doner chicken frankfurter filet mignon meatball pork
            loin beef ribs swine. Ribeye meatloaf rump filet mignon, corned beef short
            loin turkey strip steak ball tip jerky bresaola sausage flank. Flank filet
            mignon andouille short loin.</p>
        	<h1>Steak</h1>

        <p>Sirloin spare ribs tail drumstick biltong. Pancetta tri-tip sausage, fatback
            shankle shank bacon cow. Shank meatloaf t-bone chuck. Hamburger jerky frankfurter,
            turducken sausage pork loin filet mignon kielbasa tongue ham venison meatball
            t-bone brisket bresaola. Beef ribs tongue tri-tip swine tenderloin chicken
            pork venison shank t-bone shankle leberkas ball tip sausage turkey.</p>
        	<h1>Pork</h1>

        <p>Pork chop drumstick biltong jowl short loin rump leberkas t-bone, doner
            sausage meatball brisket. Corned beef bacon tri-tip prosciutto jerky beef
            ham. Prosciutto kielbasa pork chop, cow capicola corned beef sirloin. Shankle
            sirloin chicken, prosciutto tongue venison filet mignon meatloaf andouille
            turducken salami ribeye rump. Bresaola meatball ham hock short loin spare
            ribs, salami ribeye ball tip swine pork pork loin. Ball tip shank frankfurter,
           ...

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }		

header nav {
			width:602px;
			height: 30px;
			margin:0px auto;
			display: inline-block;
			background-image: url(nav-bg.png);
			background-repeat: repeat-x;
			overflow: hidden;
		}
		header nav ul {
			list-style-type: none;
			display:inline;
		}
		header nav li {
			float:left;
			overflow: visible;
		}
		header nav li a {
			width:150px;
			height:30px;
			display:block;
			text-decoration: none;
		}
		header nav li a p {
			border-right: 1px solid #BBB;
			text-align: center;
			color:#333;
			line-height: 30px;
			display: inline-block;
			width: 151px;
		}
		header nav li a:hover p {
			box-shadow: inset 0 0 3px #888;
		}
		header nav li a {
			background-repeat: no-repeat;
		}
		header nav li a.resume {
			background-image: url(resume.png);
		}
		header nav li a.portfolio {
			background-image: url(portfolio.png);
		}
		div.content {
			margin:auto;
			width:840px;
			background: #FFF url(shadow.png) repeat-x;
			box-shadow: inset 0 0 20px #BBB;
			border: 1px solid #BBB;
			border-top: 0;
			padding: 40px 60px;
		}

JavaScript

var active = "resume",
    animspeed = 500;

function changeTab(tab) {
    active = tab;
    $("#" + tab).slideDown(animspeed);
}

function change(tab) {
    if (tab == active) return;
    $("#" + active).slideUp(animspeed, function () {
        changeTab(tab);
    });
}
$(".content").slideUp(0, function () {
    $("#" + active).slideDown(animspeed);
});
$("nav li a").click(function () {
    change($(this).attr('class'));
});