JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<nav class="menu">
    <div class="align">
	<a class="link" id="active-menu" href="#">home</a>
	<a class="link" href="#">plugins</a>
	<a class="link" href="#">themes</a>
        <a href="#"><div class="logo-scanu"></div></a>
	<a class="link" href="#">web-design</a>
	<a class="link" href="#">media</a>
    <a class="link" href="#">calendar</a>
    </div>
    <input class="input-usermenu-drop" type="checkbox" id="input-usermenu">
        <div class="overlay"></div>
    <label id="usermenu-drop" for="input-usermenu">
        <i class="fa fa-bars"></i>
    </label>
    <div class="usermenu-drop">
        <div class="sub-usermenu-drop">
            <span class="user-menu-title">Menu</span> 
            <ul class="sub-usermenu-drop-links">
                <li><i class="fa fa-child"></i> Welcome, Clear</li>
                <li><i class="fa fa-check-circle-o"></i> Notifications</li>
                <li><i class="fa fa-user"></i> Profile</li>
                <li><i class="fa fa-cogs"></i> Settings</li>
                <li><i class="fa fa-cubes"></i> Admin</li>
                <li><i class="fa fa-flag-o"></i> Mod</li>
                <li><i class="fa fa-power-off"></i> Log Out</li>
            </ul>
        </div>
    </div>
</nav>
    <hr style="clear: both; visibility: hidden;" />

CSS

body {
    background: #fff;
    margin: 0px;
}

.logo-scanu {
    background: transparent url(http://dvdimagehosting.altervista.org/images/logomim.png) no-repeat;
    height: 62px;
    width: 62px;
    float: left;
    margin-left: 20px;
    position: relative;
    top: -8px;
}

.menu {
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    height: 62px;
    padding-top: 8px;
    box-sizing: border-box;
    overflow: visible;
}

nav .link {
	position: relative;
	float: left;
	outline: none;
	color: #eb0028;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 1.35em;
    font-family: 'Raleway', sans-serif;
    margin-left: 20px;
}

nav .link:hover,
nav .link:focus {
	outline: none;
}

.menu .link {
	padding: 10px;
	color: #000;
	font-weight: 600;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.menu .link::before,
.menu .link::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #eb0028;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.menu .link::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.menu .link::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.menu .link:hover,
.menu .link:focus {
	color: #eb0028;
}

.menu .link:hover::before,
.menu .link:focus::before,
.menu .link:hover::after,
.menu .link:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

#active-menu {
	color:...