JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" style="">
<div class="container">
	<div class="header">
		<div class="navbox">
		<!-- later this nav will be separated out as an include -->
		<ul class="main-nav">
			<li><a href="#" class="main ee" id="link_nest">THE NEST</a></li>
			<li><a href="#" class="main bb" id="link_hillcrest">HILLCREST VILLAGE</a></li>
			<li><a href="#" class="main cc" id="link_3little">THREE LITTLE BIRDS</a></li>
			<li><a href="#" class="main dd" id="link_early">EARLY BIRD REGISTRATION</a>
				 <ul id="sub-nav">
				 	<li class="subnav"> <span class="subnav-separators">: :</span> </li>
				 	<li class="subnav"><a href="#" class="main ff"id="link_rockport"> ROCKPORT </a></li>   
				 	<li class="subnav"><span class="subnav-separators">|</span></li>  
				 	<li class="subnav"><a href="#"class="main gg" id="link_ii_by_iv"> 11 BY 1V </a></li>  
				 	<li class="subnav"><span class="subnav-separators">|</span></li> 
				 	<li class="subnav"><a href="#" class="main hh" id="link_raw"> RAW </a></li>
				 	</ul>
			</li>
			<li><a href="#" class="main contact" id="link_contact">CONTACT</a></li>
			</ul>
			</div>
	
			<div class="logo-main">
			<ul class="main-nav">
				<li><a href="#" class="main aa"><img src="images/logo.png"></a></li>
				</ul>
			</div>
		</div>
		

	
	
	<div class="square-container"> 
	
	
	
	
	
		<!-- Here's the original for backup
	
	<div class="square one" style="overflow:hidden;">
			<div id="square_caption1" class="square_captions">The Nest</div>
			<div id="cf">
				<img class="bottom" style="width:100%; height:100%;" src="images/the_nest_residences_1_color.jpg">
				<img class="top" style="width:100%; height:100%;" src="images/the_nest_residences_1.jpg">
			</div>
			
		</div>
	
	
	-->
	
	

		<div class="square one" id="sq1" style="overflow:hidden;background-color:#000;">
			<div id="square_caption1" class="square_captions">The Nest</div>
			<div id="cf" style="overflow:hidden;height:100%;width:100%;">
				<img class="bottom" style="width:100%;"...

CSS

/* CSS Clearfix */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


/*End Clearfix*/

/*HTML Reset*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/



/* adding Museo font */

@font-face {

    font-family: museo_slab_font;
    src: local(museo_slab_font), url('../fonts/Museo_Slab_500.otf') format('opentype');

    }




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	display:table;
    width:100%;
    height:100%;
    margin:0;
}


ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*Squares*/	
.header {}

body { background:#ccd6d9; color:#fff; color:#000; font-size:0.9em; font-family: 'Source Sans Pro', sans-serif;  }
#content {
	display: block; 
	height: 100%;
	position:absolute;
	margin-left:auto;
	width:100%;
	display: block;
}
	
.container { 
	width:974px; 
	height:530px; 
	margin:0px auto; 
	border:0px solid #000; 
	position:relative; 
	top: 50%;
	margin-top:...

JavaScript

$(document).ready(function(){




/* now the image animations */


var $width_one = $("#sq1").width();
var $height_one = $("#sq1").height();

var $width_two = $("#sq2").height();
var $height_two = $("#sq2").height();

var $width_three = $("#sq3").width();
var $height_three = $("#sq3").height();

var $width_four = $("#sq4").width();
var $height_four = $("#sq4").height();


 $(".square.one,#link_nest").mouseenter(function(){
 
	if ($(".the-nest")[0]){
		$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
		}
	else{

		$(".square.one").filter(':not(:animated)').animate({width:"155px",height:"219px"},300);
		$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
		$("#square_caption1").css('visibility','visible');
	} 
 });
  
  
 $(".square.one,#link_nest").mouseleave(function(){
	if ($(".the-nest")[0]){
		$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
	}
	else{
    	$(".square.one").filter(':not(:animated)').animate({width:$width_one,height:$height_one},300);
    	
    	$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
    	$("#square_caption1").css('visibility','hidden');
    }

 });
  
  

 $(".square.two,#link_hillcrest").mouseenter(function(){
  	if ($(".the-nest")[0]){
	  	$("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
	 }
	 else{
		 $(".square.two").filter(':not(:animated)').animate({height:"220px",top:"113px"},200);
		 $("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
		 $("#square_caption2").css('visibility','visible');
     }
 });
  
 $(".square.two,#link_hillcrest").mouseleave(function(){
  	if ($(".the-nest")[0]){
	  $("#link_hillcrest").css({color:"black",fontWeight:"300"},100);
  }
else{
    	$(".square.two").filter(':not(:animated)').animate({height:$height_two,top:"125px"},200);
    	$("#link_hillcrest").css({color:"black",fontWeight:"300"},100);
    	$("#square_caption2").css('visibility','hidden');
     }
  });
  
  

...