JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<header class="navbar">
    <span class="nav-logo"></span>
    <span class="nav-dname"><a href="/">surfixe.com</a></span>
    <span class="nav-search">
        <center><input id="nav-search" type="text" name="nav-search" /></center>
    </span>
    <span class="nav-actions">
        <a onclick="ani_2_i_content(1)">Wazzup?</a>
        <span id="nav-divider"></span>
        <a id="n_home" onclick="ani_i_content(1)">Home</a>
    </span>
</header>

CSS

a, a:visited {
	color: #FFF;
	text-decoration: none;
}

.navbar {
	position: absolute;
	padding: 2px;
	top: 0px; left: 0px;
	background-color: #222;
	width: 99.7%; height: 50px;
	color: #FFF; text-align: middle;
    font-family: Arial;
}

.nav-logo {
    position: relative;
    height: 30px; width: 30px;
    top: 10px; left: 15px;
    background: url('http://www.surfixe.com/img/tick.png') no-repeat center;
    background-size: 30px;
    display: inline-block;
}

.nav-dname {
    position: relative;
    top: 2px; left: 15px;
    font-size: 18px; color: #FFF;
}

#nav-search {
    border: groove #333 2px;
    color: #FFF; font-size: 16px;
    border-radius: 3px;
    height: 30px; width: 95%;
    background: rgba(0,0,0,0.1);
}

.nav-search {
    font-size: 16px;
    background: #222;
    height: 30px; width: 50%;
    position: absolute;
    top: 12px; left: 50%;
    margin-left: -25%;
    border-radius: 3px;
    display: inline-block;
}

.nav-actions {
    position: absolute;
    top: 19px; right: 5%;
}

#nav-divider {
	height: 20px; width: 10px;
    border-left: #FFF 1px solid;
    position: relative;
    left: 7px;
}

#n_home {
	position: relative;
	left: 20px;
}