JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--HEADER-->
<div class="header">
<center>
<img src="http://nbn64.com/images/logo.png" width="500" id="logo" /><br />
<a href="#home">Hone</a>&nbsp;|&nbsp;
<a href="#ent">Entertaimnet</a>&nbsp;|&nbsp;
<a href="#vis">Visual</a>
</center>
</div>

<!--HOME-->
<div id="home" class="horizontal">
Home
</div>

<!--ENTERTAINMENT-->
<div id="ent" class="horizontal">
Entertainment
</div>

<div id="vis" class="horizontal">
Visual
</div>

<div id="music" class="horizontal">
Music
</div>

<div id="audio" class="horizontal">
Audio
</div>

<div id="tech" class="horizontal">
Tech
</div>

<div id="game" class="horizontal">
Games
</div>

<div id="des" class="horizontal">
Design
</div>

<div id="eng" class="horizontal">
Engineering
</div>

<div id="AIO" class="horizontal">
All In One
</div>

<div id="X" class="horizontal">
X Projects
</div>

<!--NEXT ROW------------------------------------->
<div class="clear"></div>

<div id="b2x1" class="horizontal">Place your content here.</div>
<div id="b2x2" class="horizontal">Place your content here.</div>
<div id="b2x3" class="horizontal">Place your content here.</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
	white-space: nowrap;
	overflow: hidden;
	background-image: url(http://nbn64.com/images/background-tile.png);
    font-family: 'Press Start 2P', cursive;
/* LAYOUT START */
}
.clear {
    clear:both;
}
.horizontal {
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    display: inline-block;
    font-family: 'Press Start 2P', cursive;
}
/* LAYOUT END */
.header {
	overflow: hidden;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	height: 500px;
	width: 100%;
	margin: 0px;
	z-index: 2;
    font-family: 'Press Start 2P', cursive;
}
#logo {
	padding-top: 5px;
    font-family: 'Press Start 2P', cursive;
}

JavaScript

$('a').on({
    click:function (e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var root = $('html, body');        
        root.animate({
           scrollLeft: $(target).offset().right,
           scrollTop: $(target).offset().top
        }, 500);
    }
});