JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/skeleton/1.2/stylesheets/skeleton.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/skeleton/1.2/stylesheets/layout.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/skeleton/1.2/stylesheets/base.css">
<div class="container">
    <header>
        <div class="sixteen columns">
             <h1><a class="logo" href="#" title="My Phone">my | phone</a></h1>
        </div>
        <div class="twelve columns">
            <ul class="menu">
                <li><a href="#">press</a>
                </li>
                <li><a href="#">downloads</a>
                </li>
                <li class="noborder"><a href="#"><span>stores</span></a>
                </li>
            </ul>
        </div>
        <!--SEARCH BOX -->
        <div class="four columns search_box">
            <form>
                <input type="text" placeholder="SEARCH" />
            </form>
        </div>
    </header>
</div>

CSS

.menu li {
    display: inline-block;
    padding: 0 10px 0 0;
    margin: 7px 10px 0 0; /* 6px padding is same as search input, plus 1px for top border */
    text-transform: uppercase;
    border-right: 1px solid #000;
}

.menu li:last-child {
    border-right: 0;
}

.menu li a {
    text-decoration: none;
    display: block;
}