JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div id="navi">
    <h1 class="logo"><a href="#">Name of Site</a></h1>
    
    <ul id="primary-nav">
        <li><a href="#">Directories</a></li>
        <li><a href="#">Committees</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">About</a></li>
    </ul>
    
    <ul id="tools-nav">
        <li class="login"><a href="#">Log In</a></li>
        <li class="email icon"><a href="#">Email</a></li>
        <li class="twitter icon"><a href="#">Twitter</a></li>
        <li class="search icon"><a href="#">Search</a></li>
    </ul>
</div>

CSS

#navi {
    height: 30px;
    background: #1e416f;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
}

.logo a {
    float: left;
    margin: 2px 10px;
    width: 36px;
    height: 26px;
    background: url(http://redsky.incredifull.com/imgs/navi/caul_white_nav.png) left top no-repeat;
    text-indent: -9999px;
}

#primary-nav, #tools-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }

#primary-nav a,
#tools-nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid white;
    line-height: 30px;
}

#primary-nav li:first-child a,
#tools-nav li:first-child a{ border-left: 1px solid white; }

#tools-nav { float: right; }

#tools-nav .icon a {
    text-indent: -9999px;
}

#tools-nav .email a { /* image */ }
#tools-nav .twitter a { /* image */ }
#tools-nav .search a { /* image */ }