JSFiddle - React, Tailwind, and code Playground

by Cgull

HTML

<script src="http://www.sigalz.co.za/menu.png"></script>
<nav class="clearfix">
		<ul class="clearfix">
			<li><a href="#" class="home">Home</a></li>
			<li><a href="#" class="about">About Us</a></li>
			<li><a href="#" class="coffee">Our Coffees</a></li>
			<li><a href="#" class="cart">Order Online</a></li>
			<li><a href="#" class="gallery">Gallery</a></li>
 			<li><a href="#" class="blog">Blog</a></li>
			<li><a href="#" class="contact">Contact Us</a></li>	
		</ul>
		<a href="#" id="pull">Menu</a>
	</nav>

CSS

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */

#topmenu { margin: 40px 0 0 0 }
/*nav { list-style: none; }*/

/*nav li { float: left; }*/

/*menu-styling ] on / hover states [*/

nav {
/*	height: 40px;*/
	height:146px;
	width: 100%;
	/*background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;*/
	position: relative;
	border-bottom: 2px solid #283744;
	background:url(http://www.sigalz.co.za/header.jpg) no-repeat
}
nav ul {
	padding: 0;
	margin: 35px auto;
/*	width: 600px;*/
width:809px;

/*	height: 40px;*/

}
nav li {
	display: inline;
	float: left;
	height:87px
}
/*nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}*/

nav li a
{
	background: transparent url(http://www.sigalz.co.za/menu.png) no-repeat 0 0;
	height: 87px;
	text-decoration: none;
	display: block;
	outline: none;
	text-indent: -9999px
}

nav li a.home{width: 84px; }
nav li a.home:hover{background-position: 0 -87px }
nav li.active a.home {background-position: 0 -174px;}

nav li a.about
{
	width: 122px;
	background-position: -84px 0;
	text-indent: -99999px;
}
nav li a.about:hover { background-position: -84px -87px; }
nav li.active a.about { background-position: -84px -174px; }

nav li a.coffee
{
	width: 155px;
	background-position: -206px 0;
	text-indent: -99999em;
}
nav li a.coffee:hover { background-position: -206px -87px; }
nav li.active a.coffee { background-position: -206px -174px; }

nav li a.cart{
	width: 160px;
	background-position: -361px 0;
	text-indent: -99999px;
}  
nav li a.cart:hover{background-position: -361px -87px;}
nav li.active a.cart{background-position: -361px -174px;}

nav li a.gallery
{
	width: 99px;
	background-position: -521px 0;
	text-indent: -99999px;
}
nav li a.gallery:hover {...