JSFiddle - React, Tailwind, and code Playground

nav for clientResponse

HTML

<header>
    <div class="container">
        <div class="clearfix">
            <div class="sixteen columns">
                <div class="clearfix">
                    <h1 id="logo"><a href="index2.php"><img src="images/logo.png" /></a></h1>
                    <div class="loggedInAs">Welcome, Jennifer Perrin | <a href="login.php?action=logout" onclick="return confirm('Jennifer Perrin, are you sure you want to logout?');">Log Out?</a></div>
                </div>
            </div>
        </div>
    </div>

<div class="containerFull">
    <div class="container">
        <div class="clearfix">
            <div class="sixteen columns">
                <nav class="header">
                    <ul>
                        <li class="current"><a href="index2.php">Dashboard</a></li>
                        <li><a href="index2.php?page=files">Files &amp; Folders</a></li>
                        <li><a href="index2.php?page=discussion">Discussions</a></li>
                        <li><a href="index2.php?page=payment">Payments</a></li>
                        <li><a href="index2.php?page=my-account">My Account</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</header>

CSS

.containerFull {
    background: url("http://jenniferperrin.com/clients2/images/nav-a.png") repeat-x scroll 0 0 #DADBDC;
    width: 100%;
}
.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
.container {
    color: #9D9D9D;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 960px;
}

a {
    color: #BE6700;
    outline: 0 none;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}

#logo {
    color: #444444;
    float: left;
    font-family: 'Lobster';
    font-size: 24px;
    line-height: 2em;
    margin: 0;
    padding: 11px 0 0 1px;
}
#logo a {
    color: #444444;
    text-decoration: none;
}

.loggedInAs {
    color: #666666;
    float: right;
    font-size: 14px;
    line-height: 1.2em;
    margin-top: 26px;
    padding: 4px 0 4px 43px;
}
nav.header {
    margin: 17px auto 0;
    overflow: hidden;
    width: 100%;
}
nav.header ul {
    list-style: none outside none;
    overflow: hidden;
}
nav.header li {
    background: url("http://jenniferperrin.com/clients2/images/nav-bg.gif") no-repeat scroll 0 0 #222222;
    float: left;
    font-size: 14px;
    line-height: 1.2em;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    width: 20%;
}
.ie nav.header li {
    width: 20%;
}
nav.header li a {
    background: url("http://jenniferperrin.com/clients2/images/nav-a.png") repeat-x scroll 0 0 #DADBDC;
    color: #444444;
    display: block;
    padding: 13px 5px 11px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
nav.header li:hover, nav.header li.current {
    background: url("http://jenniferperrin.com/clients2/images/li-first-bg.gif") no-repeat scroll 0 0 transparent;
}
nav.header li a:hover, nav.header li.current a {
    background: url("http://jenniferperrin.com/clients2/images/nav-a-hover.png") repeat-x scroll 0 0...