JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="logo">[logo]</div>
    <nav role="navigation" class="cf">
    <ul>
        <li><a href="#">This is a link</a></li>
        <li class="active"><a href="#">Active Tab</a></li>
        <li><a href="#">Lorem link</a></li>
        <li><a href="#">Dolor link two</a></li>
        <li><a href="#">Here is a link</a></li>
    </ul>
    </nav>
</div>
 
<div id="content">This is content.</div>

CSS

.logo{
    float:left;
    width:200px;
    height:100px;
    background:#EEE;
    border:1px solid #AAA;
    margin:1em;
}
nav[role="navigation"]{
    clear:both;
    margin:0 1em;
}
.header{
    background:#333;
}
#content{
    height:20em;
    background:#ddd;
    padding:1em;
}
/* pears code */
nav[role="navigation"] li {
    float: left;
    margin: 0 4px 0 0;
    font-size: 14px;
    }
nav[role="navigation"] li a {
    float: left;
    padding: 10px 15px;
    text-decoration: none;
    color: #fff;
    background: #bbb;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }
nav[role="navigation"] li a:hover,
nav[role="navigation"] li a:focus {
    background: #999;
    }
nav[role="navigation"] li a:active {
    background: #888;
    }
nav[role="navigation"] li.active a {
    color: #fff;
    background: #666;
    }

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}