JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
    <div id="arrow2">
	  
    </div>
	<div id="footernav">
      
    </div>
	<div id="social">
	       <div id="social2"><a href="https://twitter.com/Silver_Worx"><img src="<?php bloginfo('template_directory'); ?>/images/Twitter.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacteer ons via <a href="https://twitter.com/Silver_Worx">Twitter!</a></div>
		   <div id="social2"><a href="https://www.facebook.com/pages/Silverworx/574165286008400"><img src="<?php bloginfo('template_directory'); ?>/images/Facebook2.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacteer ons via <a href="https://www.facebook.com/pages/Silverworx/574165286008400">Facebook!</a></div>
	</div>
	<div id="streep">
	
	</div>
    </div>	
	<div id="copyright">
	       &copy; Silverworx 2014
	</div>

CSS

#footer {
margin-top: 50px;
height: 320px;
width: 100%;
background: #1A4265;
float: left;
}
#arrow2 {
margin: 0px auto;
margin-top: -30px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid #1A4265;
}
#footernav {
margin: 20px auto;
margin-top: 70px;
width: 65%;
float: left;
height: 200px;
}
#footernav ul {
margin-left: 10%;
padding: 0;
list-style: none;
}
#footernav ul li {
float: left;
display: block;
height: 20px;
font-family: Verdana;
font-size: 20px;
text-align: center;
margin: 10px;
width: 90px;
}
#footernav ul li a {
color: #fff;
text-decoration: none;
}

#footernav ul li a:hover {
text-decoration: underline;
}
#footernav ul ul li {
margin-left: -10px;
margin-right: 0px;
}
#social {
margin-left: 62%;
margin-top: 30px;
height: 200px;
width: 30%;
}
#social2 {
margin-top: 40px;
margin-left: 11%;
font-family: Verdana;
font-size: 20px;
color: #fff;
}
#social2 a, a:visited {
color: #fff;
}
#social2 a:hover {
text-decoration: none;
}
#streep {
margin: 0 auto;
width: 84%;
border: 1px solid #fff;
}
#copyright {
font-size: 20px;
color: #fff;
width: 20%;
height: 30px;
border: 1px solid #fff;
}