JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
    <nav class>
        <!--Happy (day of week) uses javascript, just using placeholder text-->
        <div class="day">Happy Wednesday.</div>
        <ul>
            <li><a href="#">Company blog</a>

            </li>
            <li><a href="#">Our story</a>

            </li>
            <li><a href="#">Follow us on Twitter</a>

            </li>
            <li><a href="#">System status</a>

            </li>
            <li><a href="#" class="signin">Sign in</a>

            </li>
        </ul>
    </nav>
    <header>
        <img src="https://c9.io/aaronkahlhamer/37signals/workspace/logo-37s-large.png"
        alt="37signals" />
        	<h1>Making collaboration productive and enjoyable for people every day.</h1>

        	<h5>Frustration-free web-based apps for collaboration, sharing information, and making decisions.<h5>	
		</header>
		
		<div class="hidden bc">
			<img src="https://c9.io/aaronkahlhamer/37signals/workspace/logo-37s-large.png" alt="37signals" />
			<h1><span>Basecamp</span> is the project management tool you wish you had on your last project.</h1>
			<p>Are you still managing projects with email? Are you still using Excel for your to-do lists? It's time to upgrade to Basecamp. Manage projects and collaborate with your team and clients the modern way.</p>
			<img src="https://c9.io/aaronkahlhamer/37signals/workspace/arrow-left.png" class="right-arrow">
		</div>
		
		<div class="hidden hr">
			<img src="https://c9.io/aaronkahlhamer/37signals/workspace/logo-37s-large.png" alt="37signals" />
			<h1><span>Highrise</span> is the project management tool you wish you had on your last project.</h1>
			<p>Keep a permanent record of people you do business with. Know who you talked to, when you talked to them, what was said, and when to follow up next. Over 20,000,000 contacts are tracked using Highrise.</p>
			<img...

CSS

* {
    margin:0;
    padding:0;
}
a {
    text-decoration: none;
    color: #369;
}
section {
    margin: 30px auto;
    width: 825px;
    display: block;
}
hr {
    background: white url('https://c9.io/aaronkahlhamer/37signals/workspace/img-hr.png') no-repeat scroll 50% 50%;
    clear: both;
    border: 0;
    color: transparent;
    height: 12px;
}
sup {
    color: #999;
    font-weight: normal;
    font-size: 11px;
}
@font-face {
    font-family: CrimsonSemiBold;
    src: url('https://c9.io/aaronkahlhamer/37signals/workspace/Crimson-Semibold.otf');
}
@font-face {
    font-family: CrimsonRoman;
    src: url('https://c9.io/aaronkahlhamer/37signals/workspace/Crimson-Roman.otf');
}
/* Nav */
 nav {
    min-width: 100%;
    height: 48px;
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
.day {
    float: left;
    margin: 12px;
    padding: 15px 46px;
    font-size: 12px;
    color: #999
}
nav ul {
    position: relative;
    bottom: 2px;
    right: 1px;
    float: right;
    margin: 12px 18px;
    padding: 10px 30px;
}
nav li {
    margin: 15px 5px 15px 6px;
    padding: 5px 4px;
    font-size: 12px;
    display: inline;
    color: #369;
}
nav li a:hover {
    color: #18AFE0;
}
.signin {
    color: #18AFE0;
}
.signin:hover {
    color: #369;
}
/* Header */
 header {
    clear: both;
    width: 829px;
    height: 163px;
    margin: 0 auto;
    padding: 6px 0;
    text-align: center;
    font-family:"CrimsonSemiBold", "Times New Roman", Georgia, serif;
}
header h1 {
    font-weight: 500;
    font-size: 58px;
    line-height: 1em;
    margin: 10px 0 20px 0;
    letter-spacing: -2px;
    color: #232323;
    clear: both;
}
header h5 {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5em;
    margin: 10px 0;
    color: #222;
}
/* Products */
 .products {
    text-align: center;
    height: 288px;
    padding-bottom: 30px;
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
.products h3 {
   ...

JavaScript

$(document).ready(function () {
    var delay = 1000;
    var timeouts = new Array();

    $('.products .bc').on('mouseenter', function () {

        restoreValues(false, true, true, timeouts);
        $('header').addClass('hidden');
        $('.bc:first').removeClass('hidden').css({
            'clear': 'both',
                'width': '829px',
                'height': '163px',
                'margin': '0 auto',
                'padding': '6px 0',
                'text-align': 'center',
                'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        // Added bc:first to prevent styles being added to other .bc classes.
        $('.bc:first h1, .bc:first p').css('padding', '18px 0 0');
        // Adjusting vertical layout so red arrow more closely matches location on 37signals.com.  
        $('.bc:last').css('box-shadow', '0 0 10px #333');
    });
    $('.products .bc').on('mouseleave', function () {
        timeouts.push(setTimeout(function () {
            restoreValues(true, false, false, timeouts);
        }, delay));
    });
    $('.products .hr').on('mouseenter', function () {
        restoreValues(true, false, true, timeouts);
        $('header').addClass('hidden');
        $('.hr:first').removeClass('hidden').css({
            'clear': 'both',
                'width': '829px',
                'height': '163px',
                'margin': '0 auto',
                'padding': '6px 0',
                'text-align': 'center',
                'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        $('.hr:first h1, .hr:first p').css('padding', '18px 0 0');
        $('.hr:last').css('box-shadow', '0 0 10px #333');
        $('.right-arrow-b').removeClass('right-arrow-b').css({
            'left': '80px',
                'position': 'relative',
                'z-index': '1'
        });
    });
    $('.products .hr').on('mouseleave', function () {
       ...