JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<header>
    <nav class="group">
        <h1><a href="/">Home</a></h1>
        <ul>
            <li><a href="#">Connections</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </nav>
</header>

CSS

/* Clearfix the nav because of the floats */
.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

/* Float the H1 left */
h1 {
    float: left;
    margin: 0;
    line-height: 24px;
}

/* Float the ul right */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
}

/* BUT float the li left */
nav ul li {
    float: left;
    margin-left: 4px;
    line-height: 24px;
}

nav ul li:first-child {
    margin-left: 0;
}