JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1 class="logo">NAME</h1>              
        <nav id="top-nav">
            <ul>
                <li id="home" class="first"><a href="/">Home</a></li>
                <li class="about"><a href="#">About Me</a></li>
                <li class="music"><a href="#">Music</a></li>
                <li class="shows"><a href="#">Shows</a></li>
                <li class="photos"><a href="#">Photos</a></li>
                <li class="club"><a href="#">Fan Club</a></li>
                <li class="contact"><a href="#">Contact</a></li>
            </ul>
        </nav>
        <nav class="sm">
            <ul>
                <li class="email"><a href="#">Email</a></li>
                <li class="facebook"><a href="#">Facebook</a></li>
                <li class="twitter"><a href="#">Twitter</a></li>
                <li class="instagam"><a href="#">Instagam</a></li>
                <li class="youtube"><a href="#">Youtube</a></li>
            </ul>
        </nav>        
    </header>

CSS

/* ---------------------------------------- */
/*   HEADER                                 */
/* ---------------------------------------- */
header{
    background-image: url(../images/th-02-r.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height:170px;
    width: 1020px;
    border-top-width: 7px;
    border-top-style: solid;
    border-top-color: #c67e96;
}
#top-nav{
    float:left;
    list-style-type: none;
    margin-left: 150px;
}
#top-nav li{ float:left; position:relative; list-style-type: none; margin-right:5px;}
#top-nav a{ height: 34px;
    width: 88px;padding-top:5px; height:20px; display:block; color:#000; font:bold 16px "Trebuchet MS"; text-align:center; text-decoration:none; text-transform:uppercase; }
#top-nav a:hover, #top-nav a.home.active{
    color: #FFF;
    background-image: url(../images/button.png);
    background-repeat: no-repeat;
    height: 34px;
    width: 88px;
}
#top-nav a.active{ color:#fe0af0; }
li.first#home {
    background-image: url(../images/button.png);
        height: 34px;
    width: 88px;
}
nav.sm{
    position: absolute;
    text-indent: -9999;
}
nav.sm ul{    text-indent: -9999;}
nav.sm li{  position:relative; list-style-type: none;    text-indent: -9999;}
nav.sm a{
    height: 43px;
    width: 43px;
    display: block;
    text-indent: -9999;
}
nav.sm li.email{
    background-image: url(../images/n-social-media.png);
    background-repeat: no-repeat;
    height: 43px;
    width: 43px;
    background-position: -10px -65px;
        text-indent: -9999;
}
nav.sm li.facebook{
    background-image: url(../images/n-social-media.png);
    background-repeat: no-repeat;
    height: 43px;
    width: 43px;
    background-position: -10px -65px;
        text-indent: -9999;
}