JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<!--
Basically, I want to keep the markup in the order it appears visually on the page. The site navigation should come first, then the account info should be floated to the right. Neither of them should be restricted to any width, but the navigation on the left must wrap to another line if it becomes wider than the space allows.
-->

<!-- So here's how I have it: -->

<header role="banner">
    <nav role="navigation">
        <ul class="nav-user-info">
            <li>username</li>
            <li><a href="">Account</a></li>
            <li><a href="">logout</a></li>
        </ul>
        <ul class="nav">
            <li><a href="" class="logo">Logo</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
        </ul>
    </nav>
</header>

<!-- But I want it like this: -->
<!--
<header role="banner">
    <nav role="navigation">
        <ul class="nav">
            <li><a href="" class="logo">Logo</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
            <li><a href="">A link</a></li>
        </ul>
        <ul class="nav-user-info">
            <li>username</li>
           ...

CSS

body {
    background: #eee;
    font: 14px/20px 'Helvetica Neue', Arial, sans-serif; 
}
section[role="main"], nav[role="navigation"] {
    margin: 0 auto;
    padding: 0 20px;
    overflow:hidden;
    *zoom:1;
}
header[role="banner"] {
    background: #FFF;
    padding: 10px 0;
}
.logo {
    display: inline-block;
    color: #222;
    font-size: 16px;
    font-weight: bold;
}
nav[role="navigation"] li {
    display: inline;
    font-size: 12px;
}
nav[role="navigation"] .nav-user-info {
    float: right;
    margin-left: 20px;
}
.nav-user-info li {
    float: left;
    margin-right: 10px;
}
.nav-user-info li + li {
    border-left: 1px solid #DDD;
    padding-left: 9px;
}
.nav-user-info li:last-child {
    margin-right: 0;
}