JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
		<div class="wrapper" id="wrapper">
			<a href="index.php"><img class="aveera-logo" src="http://i.imgur.com/WT81l2K.png" /></a>
			<div class="cod-main">
				<img class="cod-logo" id="cod-logo" src="http://i.imgur.com/e9Pzzgf.png" />
				<div class="cod-options" id="cod-options">
					<a href="cod/cod.php"><div class="option-block" id="cod-team"><i class="fa fa-users"></i></div></a>
					<a href="cod/cod.php#gallery"><div class="option-block"><i class="fa fa-camera-retro"></i></div></a>
					<br />
					<a href="cod/cod.php#streams"><div class="option-block"><i class="fa fa-twitch"></i></div></a>
					<a href="cod/cod.php#contact"><div class="option-block"><i class="fa fa-pencil-square-o"></i></div></a>
					<br />
					<button class="option-button" id="cod-back"><i class="fa fa-long-arrow-left"></i> Back</button>
				</div>
			</div>
			<div class="league-main">
				<img class="league-logo" id="league-logo" src="http://i.imgur.com/5eGJuMU.png" />
				<div class="league-options" id="league-options">
					<a href="league/league.php"><div class="option-block"><i class="fa fa-users"></i></div></a>
					<a href="league/league.php#gallery"><div class="option-block"><i class="fa fa-camera-retro"></i></div></a>
					<br />
					<a href="league/league.php#streams"><div class="option-block"><i class="fa fa-twitch"></i></div></a>
					<a href="league/league.php#contact"><div class="option-block"><i class="fa fa-pencil-square-o"></i></div></a>
					<br />
					<button class="option-button" id="league-back"><i class="fa fa-long-arrow-left"></i> Back</button>
				</div>
			</div>

			<div class="footer">
				<div class="left">
					Copyright &copy; Team Aveera 2015
				</div>
				<div class="right">
					<button class="footer-button" id="about"><a href="#">About</a></button>
					<button class="footer-button" id="staff"><a href="#">Staff</a></button>
					<button...

SCSS

* {
	margin: 0; padding: 0;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat-Regular.ttf');
}
@font-face {
	font-family: 'Friz Quadrata';
	src: url('../font/Friz Quadrata Std Medium.otf') format('opentype');
}

@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

body {
	font-family: 'Montserrat';
}

.wrapper {
	min-height: 100%;
	height: 100%;
	width: 100%;
}
.aveera-logo {
	z-index: 5;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
}
.cod-main {
	width: 50%;
	background: #EFEFEF url('http://i.imgur.com/O3cp8DP.png');
	position: absolute;
	top: 0; left: 0; bottom: 0;
	text-align: center;
	border-right: 3px solid #111;

	.cod-logo {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		width: 200px;
		display: block;
		margin: auto;
		cursor: pointer;
	}

	.cod-options {
		display: none;
		/*top: 50%;
		transform: translateY(-50%);*/
		@include vertical-align;

		.option-block {
			position: relative;
			display: inline-block;
			width: 80px;
			height: 80px;
			border: 2px solid #999;
			margin: 4px 2px;
			line-height: 90px;
			cursor: pointer;

			i {
				color: #999;
				font-size: 24px;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
			}

			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
		}
		.option-block:hover {
			border-color: #999;
			background-color: lighten(#A0A0A0, 20);

			i { color: #555; }
		}
		.option-button {
			margin-top: 10px;
			width: 175px;
			height: 40px;
			line-height: 40px;
			border: 2px solid #999;
			color: #999;
			font-family: 'Montserrat';
			text-transform: uppercase;
			cursor: pointer;
			background: none;

			-webkit-transition: all .2s...

JavaScript

$(function() {
	/** Home **/
	$('#league-logo').on('click', function() {
		$(this).fadeOut(400, function() {
			$('#league-options').fadeIn(400);
		});
	});
	$('#league-back').on('click', function() {
		$('#league-options').fadeOut(400, function() {
			$('#league-logo').fadeIn(400);
		});
	});
	$('#cod-logo').on('click', function() {
		$(this).fadeOut(400, function() {
			$('#cod-options').fadeIn(400);
		});
	});
	$('#cod-back').on('click', function() {
		$('#cod-options').fadeOut(400, function() {
			$('#cod-logo').fadeIn(400);
		});
	});

	/** TEMPORARY **/
	$('#staff').on('click', function() { alert('Being built! Coming soon! ')});
	$('#contact').on('click', function() { alert('Being built! Coming soon! ')});
	$('#about').on('click', function() { alert('Being built! Coming soon! ')});
});