JSFiddle - React, Tailwind, and code Playground

by dannedolk

HTML

<header class="content-header clear" role="banner">
    <nav class="main-nav">
        <ul id="menu-main-menu" class="main-nav-anchors">
            <li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-261"><a href="http://www.erikford.me/about/">About</a>
            </li>
            <li id="menu-item-676" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-676"><a href="http://www.erikford.me/blog/">Blog</a>
            </li>
            <li id="menu-item-666" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-666"><a href="#scroll-search">Search</a>
            </li>
            <li id="menu-item-750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-750"><a href="http://feeds.feedburner.com/notdivisible">Feed</a>
            </li>
        </ul>
    </nav>
</header>

CSS

.content-header {
    background-color:rgba(248, 248, 248, 0.95);
    position:relative
}
body {
    color: rgb(85, 85, 85);
    font-family:'pragmatica-web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
}
body, html, div, blockquote, img, label, p, a, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, fieldset, input, th, td, figure {
    border: 0px none;
    margin: 0px;
    padding: 0px;
}
.main-nav {
    position:relative
}
.has-js .main-nav {
    float: right;
    display: block !important;
}
.main-nav ul {
    font-size:0.875em;
    line-height:3.5em;
    list-style:none;
    margin-bottom:0;
    padding-left:0;
    text-align:center
}
.main-nav ul {
    line-height:5.143em;
    text-align:left
}
.main-nav li {
    border-bottom:1px solid #444;
    border-right:1px solid #444;
    float:left;
    width:50%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.main-nav li:nth-child(even) {
    border-right:none
}
.main-nav li:nth-child(3), .main-nav li:nth-child(4) {
    border-bottom:none
}
.main-nav li a {
    background-color:#151515;
    border-bottom:none;
    color:#bbb;
    display:block
}
.main-nav li a:hover {
    color:#fff
}