JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<header>
    <nav>
        <ul class="navsymbol">
            <li class="nav_Home"><a href="#"></a>

            </li>
            <li class="nav_Design"><a href="#"></a>

            </li>
            <li class="nav_Contact"><a href="#"></a>

            </li>
        </ul>
    </nav>

CSS

body {
    margin:0;
    padding:0;
    background:#000;
    width:1026px; /* added for demo only */
}
header nav {
    width:100%;
    background:#333;
    text-align:center;
    position:relative;
    font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    height:98px;
    border-bottom:12px solid black;
}
header nav ul {
    padding:0;
    margin:0;
    list-style:none;
}
header nav ul li {
    position:relative;
    width:110px;
    height:90px; 
    float:left;
    border-bottom:12px solid #000;
    border-left:1px solid #333 border-right:1px solid #666;
}
header nav ul li:hover {
    border-bottom-color:#FFC926;
}
header nav ul li a {
    width:110%;
    color:#FFF;
    text-decoration:none;
    display:inline;
    float:left;
    padding-top:75px
}
.navsymbol li {
    background:url("https://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;
}
li.nav_Home {
    width:342px;
    height:70px;
    background-position:-10px -10px;
}
li.nav_Home:hover {
    width:342px;
    height:70px;
    background-position:-362px -10px;
}
li.nav_Contact {
    width:342px;
    height:70px;
    background-position:-714px -10px;
}
li.nav_Contact:hover {
    width:342px;
    height:70px;
    background-position:-1066px -10px;
}
li.nav_Design {
    width:342px;
    height:70px;
    background-position:-1418px -10px;
}
li.nav_Design:hover {
    width:342px;
    height:70px;
    background-position:-1770px -10px;
}