JSFiddle - React, Tailwind, and code Playground

HTML

<header>
            <div id="logo">
                <a href="#"><img src="logo2.png" alt="#" /></a>
            </div>    
            <nav>
                <ul>
                    <li><a id="testa" href="#">HOME</a></li>
                    <li><a id="testb" href="#">PORTFOLIO</a></li>
                    <li><a id="testc" href="#">SKILL</a></li>
                    <li><a  id="testd" href="#">CONTACT</a></li>
                    <li><a id="test" href="#">FACEBOOK</a></li>
                    <li><a id="test1" href="#">TWITTER</a></li>
                    <li><a id="test2" href="#">LINKEDIN</a></li>
                    <li><a id="test3" href="#">GOOGLE+</a></li>
                </ul>
            </nav>
        </header>

CSS

nav {
position:absolute;
left : 0;
top : 10px;
margin : auto;
font-family : aldrich;
}
nav ul {
width : 100%;
list-style : none;
}
nav li {
float : left;
}
nav a {
margin-left : 100px;
display : block;
font-size : 14px;
line-height : 60px;
text-transform : uppercase;
color : grey;
text-decoration : none;
}
nav a:hover {
margin-left : 100px;
display : block;
font-size : 14px;
line-height : 60px;
text-transform : uppercase;
color : red;
text-decoration : none;
}
#testa {
clear : both;
height : 38px !important ;
left : 400px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#testb {
clear : both;
height : 38px !important ;
left : 470px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#testc {
clear : both;
height : 38px !important ;
left : 580px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#testd {
clear : both;
height : 38px !important ;
left : 640px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#test {
clear : both;
height : 38px !important ;
left : 1200px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#test1 {
clear : both;
height : 38px !important ;
left : 1300px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#test2 {
clear : both;
height : 38px !important ;
left : 1400px !important ;
border : none;
list-style-image : none;
list-style-position : outside;
list-style-type : none;
position : absolute;
top : 0;
}
#test3 {
clear : both;
height : 38px !important ;
left : 1500px !important ;
border : none;
list-style-image...