JSFiddle - React, Tailwind, and code Playground

HTML

<div id="responsiveContainer">
<a class="nFx" href="#" alt="EnterElysium">
<p class="logoText">E<span class="sFSize">NTER</span>E<span class="sFSize">LYSIUM</span></p>
<img id="EnterElysiumLogo" src="images/EnterElysiumLogo.png" width="149" height="111" alt="EnterElysium"/>
</a>
<a class="nFx" href="https://www.youtube.com/user/EnterElysium" alt="Watch my videos" target="new">
<img id="youtube" align="right" src="images/YouTube-Icon.png" width="50" height="36" alt="Watch my videos"/>
</a>
<a class="nFx" href="http://www.twitch.tv/enterelysium" alt="Watch my streams" target="new">
<img id="twitch" align="right" src="images/Twitch-Icon.png" width="50" height="51" alt="Watch my streams"/>
</a>
<a class="nFx" href="https://www.facebook.com/EnterElysiumYT" alt="Follow me on Facebook" target="new">
<img id="facebook" align="right" src="images/Facebook-Icon.png" width="40" height="40" alt="Follow me on Facebook"/>
</a>
<a class="nFx" href="https://twitter.com/EnterElysium" alt="Follow me on Twitter" target="new">
<img id="twitter" align="right" src="images/Twitter-Icon.png" width="50" height="50" alt="Follow me on Twitter"/>
</a>
<a class="nFx" href="https://plus.google.com/+EnterElysium/posts" alt="Follow me on Google+" target="new">
<img id="googlePlus" align="right" src="images/GooglePlus-Icon.png" width="40" height="40" alt="Follow me on Google+"/>
</a>
<a class="nFx" href="https://www.patreon.com/EnterElysium" alt="Support me on Patreon" target="new">
<img id="patreon" align="right" src="images/Patreon-Icon.png" width="40" height="40" alt="Support me on Patreon"/>
</a>
<div id="navbar">
<ul>
<li><a class="activeNavA" href="#">Active Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
</ul>
</div>
<div id="siteContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan....

CSS

*, body {
    margin: 0;
    padding: 0;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Website Background Color Section */
body {
    background-color: #005399;
}
/* End Of Website Background Color Section */
/* Do not change the code below, if you are not sure of what you are doing! */
#responsiveContainer {
    width: 100%;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Logo Section */
.logoText {
    color: #FFFFFF;
    font-family: SourceSansProBold;
    font-size: 70px;
    text-shadow: 0px 4px 0px #000000;
    display: inline;
}
.sFSize {
    font-size: 50px;
}
#EnterElysiumLogo {
    margin-top: 50px;
    margin-bottom: -15px;
}
/* End Of Logo Section */
/* Navbar Section */
#navbar {
    height: 40px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 0px #000000;
    width: 100%;
}
#navbar ul {
    list-style-type: none;
    text-align: center;
}
#navbar ul li {
    display: inline;
    vertical-align: middle;
    line-height: 40px;
    margin-left: 5px;
    margin-right: 5px;
}
/* End Of Navbar Section */
/* Website Icons Section */
#youtube {
    margin-top: 120px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#youtube:hover {
    width: 40px;
    height: 29px;
}
#twitch {
    margin-top: 113px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#twitch:hover {
    width: 40px;
    height: 41px;
}
#facebook {
    margin-top: 116px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#facebook:hover {
    width: 30px;
    height: 30px;
}
#twitter {
    margin-top: 116px;
    transition:...