JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<header>
    <nav class="container"> <a href="index.html"><img src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400"></a>

        <form class="search">
            <input type="text" class="input text" placeholder="Keyword">
            <input type="text" class="input text" placeholder="Location">
            <input type="submit" class="btn submit">
        </form>
    </nav>
</header>

CSS

img{vertical-align:middle;}
html, body {
    height: 100%;
}
a {
    text-decoration: none;
}
.container {
    padding-left: 40px;
    padding-right: 40px;
}
header {
    padding-top: 30px;
    padding-bottom: 30px;
}
header nav {
    height: 50px;
    line-height: 50px;
}
header ul {
    float: right;
}
header ul li {
    display: inline-block;
}
header ul li a {
    color: rgb(58, 64, 70);
    display: block;
    font-family:'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif;
    font-size: 13px;
    height: 21px;
    line-height: 21px;
    margin-left: 25px;
    text-decoration: none;
    padding-left:15px;
    padding-right:15px;
}
header ul li a.active {
    color: #f16162;
}
header img {
    height: 50px;
}
.input {
    margin:0;
    padding: 10px 12px;
    font-weight: 300;
    border-radius: 3px;
    box-sizing: border-box;
    vertical-align:middle;
}
.search {
    display: inline-block;
}

.search .text {
    width: 300px;
    margin-right: 30px;
    ;
}
.search .submit {
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    height: 38px;
    width: 60px;
    vertical-align:middle;
}
.btn {
    border-radius: 3px;
    background-color: black;
    color: #fff;
    border: 0;
    text-decoration: none;
}
.right {
    float:right;
}