JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="top">
		<div class="intop">
			<div class="svg-menu">
                	<a href="#"><img src="http://griddr.com/wp-content/themes/gri/images/nav.svg"/></a>
            </div>
			<div class="logo">
				<img src="http://griddr.com/wp-content/themes/gri/images/logo.png" alt="Griddr" />
			</div>

			<div class="nav-wrap"><div class="menu-menu-1-container"><ul id="menu-menu-1" class="nav"><li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-22"><a href="http://griddr.com/">Home</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40"><a href="http://griddr.com/product/dot-grid-book/">Dot Grid Book</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-42 current_page_item menu-item-44"><a href="http://griddr.com/contact/">Contact</a></li>
</ul></div></div>


			<div class="top-cart">
												<a class="cart-contents" href="http://griddr.com/cart/" title="View your shopping cart">6 <span class="rhide">Items</span></a>
			</div><div class="clear"></div>

		</div>
	</div>

CSS

.top {
    background: #edebe6;
    height: 80px;
}
.intop {
    
    max-width: 1080px;
    margin: 0 auto;
    display: table;
    width: 100%;
}
.logo {
    width: 20%;
    float: left;
    
}
.logo img {
    display: table-cell;
    vertical-align: middle;
    margin-top: 15px;
}
.svg-menu {
    display: none;
}
.nav-wrap {
    width: 68%;
    float: left;
    height: 80px;
    display: table;
}
ul.nav {
    list-style: none;
    float: right;
    margin-top: 23px;
    margin-right: 45px;
    
}
ul.nav li {
    display: inline-block;
    margin-left: 35px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}
ul.nav li a {
    color: #403b33;
}
ul.nav li a:hover {
    background: none;
    color: #d3643b;
}

ul.nav li.current-menu-item a {
    color: #d3643b;
    position: relative;
}
ul.nav li a::after {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
    height: 1px;
    background: #d3643b;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}
ul.nav li a:hover::after,
ul.nav li a:focus::after {
    height: 2px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}
ul.nav li.current-menu-item a:after {
    content: '';
    height: 2px;
    width: 60%;
    background: #d3643b;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.top-cart {
    width: 12%;
    float: left;
    height: 80px;
    display: table;
    text-align: right;
    padding-right: 18px;
    background: #83b4a4 url(images/cart.png) no-repeat 20px center;
}
.top-cart a {
    vertical-align: middle;
    display:...