JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bwp">
<a href="#"><img src="http://bwpcommunications.com/TESTING/images/elements/Logo_001.jpg" width="104" height="104" border="0" /></a>
</div>
<div id="nav">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('agency','','http://bwpcommunications.com/TESTING/images/elements/nav_agency_002.jpg',1)"><img src="http://bwpcommunications.com/TESTING/images/elements/nav_agency_001.jpg" alt="agency" name="agency" width="71" height="71" border="0"/></a> 
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('work','','http://bwpcommunications.com/TESTING/images/elements/nav_work_002.jpg',1)"><img src="http://bwpcommunications.com/TESTING/images/elements/nav_work_001.jpg" alt="work" name="work" width="71" height="71" border="0" /></a> 
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','http://bwpcommunications.com/TESTING/images/elements/nav_blog_002.jpg',1)"><img src="http://bwpcommunications.com/TESTING/images/elements/nav_blog_001.jpg" alt="blog" name="blog" width="71" height="71" border="0" /></a> 
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','http://bwpcommunications.com/TESTING/images/elements/nav_contact_002.jpg',1)"><img src="http://bwpcommunications.com/TESTING/images/elements/nav_contact_001.jpg" alt="contact" name="contact" width="71" height="71" border="0" /></a> 
</div>

<div id="bg">
	<div id="htxt">FOREVER IN BLUE JEANS BABY</div>
	<div id="hsubtxt"><b>CLIENT:</b> VAULT DENIM</div>
	<div id="bottomNav">
		<div class="box"><p align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clients','','http://bwpcommunications.com/TESTING/images/elements/plus002b.png',1)"><img src="http://bwpcommunications.com/TESTING/images/elements/plus001b.png" alt="clients" name="clients" border="0"/></a>	CLIENT LIST</p></div>
		<div class="box"><p align="center"><a href="#" onmouseout="MM_swapImgRestore()"...

CSS

body, html{
    height:100%;
    margin:0;
}

body {
    overflow-y:scroll;
    overflow-x:hidden;
    
}

/* WRAPPERS */
#main {
    min-height:1200px;
}

/* BANNERS */
#bg {
    display:block;
    width:100%; 
    height:100%;
    max-height:900px;
    background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:700;
}

#htxt {
    position:relative;
    font-family: 'Raleway';
    font-weight:bold;
    font-size: 6em;
    text-align:center;
    color:#FFF;
    width:80%;
    max-width:960px;
    line-height:100px;
    margin:0 auto 22%;
    padding:22% 0 0;
    z-index:800;
}

#hsubtxt {
    position:relative;
    font-family: 'Raleway';
    font-size: 3em;
    text-align:center;
    color:#FFF;
    width:80%;
    margin:2% auto 0;
    z-index:800;
}   

#bottomNav {
    font-family: 'Cabin Condensed', sans-serif; 
    font-size:28px;
    font-weight:400;
    color:#FFF;
    letter-spacing:1px;
    width:102%;
    position:inherit;
    bottom:0;
}

.box {
    background-image: url(http://bwpcommunications.com/TESTING/images/elements/transparentBG.png);
    width:33%;
    height:60px;
    float:left;
    position:relative;
    left:0;
    margin-right:2px;
    bottom:0;
}
.box img {
    position:absolute;
    left:0;
    bottom:0;
}
.box p {
    margin-top:15px;
}
    


/* NAVIGATION */

#bwp {
    position:fixed;
    top:0;
    left:0;
    width:104ox;
    height:104px;
    z-index:900;
}

#nav {
    position:fixed;
    top:0;
    right:0;
    width:71px;
    height:71px;
    z-index:900;
}

#nav img {
    margin-bottom:2px;
}

/* 

/* BG COLOR BLOCKS */

#BlockBlue1 {
    position:relative;
    float:left;
    background-color:#c5d1d1;
    width:110%;
    margin-left:-10px;
    margin-bottom:-10px;
    min-height:20px;
    clear:both;
}
#BlockBlue2 {
    position:relative;
...