JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>	<a href="index.html"><img src="http://i.imgur.com/upTiLA3.png" alt="George Designs Logo" class="brand"></a>

        <img src="http://i.imgur.com/8IimU1t.png" alt="menu" class="menu-trigger">
        <nav class="nav-menu">
            <ul class="clearfix">
                <li><a href="#" class="active">Home</a>
                </li>
                <li><a href="#">Work</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
</body>

CSS

/** GENERAL STYLING **/
 body {
    font-family:'Lato', sans-serif;
    font-size: 1em;
    margin: 0;
}
a {
    text-decoration: none;
}
/** NAVIGATION STYLING **/
 header {
    padding: 18px 0 18px 0;
    border-bottom: 1px solid #e61d72;
}
.nav-menu {
    text-align: right;
    margin-right: 136px;
}
li {
    list-style: none;
    margin-right: 30px;
    display: inline;
}
li a {
    color: #e61d72;
}
.active {
    color: #e61d72;
}
.brand {
    float: left;
    margin-left: 136px;
    margin-bottom: 18px;
}
.menu-trigger {
    display: none;
}
@media screen and (max-width: 768px) {
    .nav-menu {
        margin: 0;
    }
    nav ul {
        margin: 0;
        padding: 0;
    }
    nav ul li {
        clear: both;
        display: block;
        margin-right: 0;
        margin-bottom: 18px;
        border-bottom: 2px solid #e61d72;
    }
    nav ul li:last-child {
        border-bottom: none;
    }
    .menu-trigger {
        display: block;
        float: right;
    }
}