JSFiddle - React, Tailwind, and code Playground

by Osman Salihovic

HTML

<div id="header">

        <div class="w960">

            <div id="logo">
                <h2>Text</h2>
                <p>Text</p>
            </div>

            <nav>
                <ul>
                        <li class="first active">
    <a href="#">1</a>
</li>
<li>
    <a href="#">2</a>
</li>
<li>
    <a href="#">3</a>
</li>
<li>
    <a href="#">4 </a>
</li>
<li class="last">
    <a href="#">5</a>
</li>

                </ul>
            </nav>

        </div>

    </div><!-- end of header -->

CSS

#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}

.w960 { width:960px; margin:auto; }

nav{width:auto; float:right;line-height: 50px;}
nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
nav ul li a:hover, .active a{color:#fff}

#logo{width: 40%;float: left;height: 90px;}
#logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
#logo h2 span{color:#FFB400;}
#logo p {margin-top: -25px;color:#b8bbbc;}