JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<section class="header-container jumbotron">
<div class="row">
<nav class="col-md-10 col-md-offset-2">
<ul class="menu">
<li> <a href="/"> HOME </a> </li>
<li> <a href="pages/about"> ABOUT </a></li>
<li> <a href="pages/register"> SUBMIT YOUR BUSINESS! </a></li>
<li> <a href="pages/login"> LOGIN </a> </li>
<li> <a href="pages/contact"> CONTACT US </a> </li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-md-4 logo">
<span style="border: 1px solid gray;">Here goes the logo</span>
</div>
</div>
<div class="row">
<div class="search-bar col-md-10">
<form>
<div>
<label for="title">Title</label>
<input type="text" "#title"/>
</div>
<div>
<label for="body">Body</label>
<input type="text" "#body"/>
</div>
<div>
<input type="submit" value="Create text"/>
</div>
</form>
</div>
</div>
</section>
CSS
.jumbotron{
background: red;
padding: 0;
margin: 0;
}
.header-container{
min-height: 325px;
background: #ffd106;
background: url(../img/city.jpg);
border-top:1px solid #252525;
}
.menu{
list-style-type: none;
}
.menu li a{
color:#252525;
float:left;
font-size:11px;
padding:1px 10px;
}
.logo{
padding:10px;
}
.search-bar{
width:80%;
background: none repeat scroll 0% 0% #252525;
border-radius: 3px;
box-shadow: 1px 1px 1px #545454;
padding:5px 4px;
color:#efefef;
font-weight: normal;
}
.search-bar div{
float:left;
margin-left: 10px;
}
.search-bar div input{
border:1px solid #CCC;
padding:4px;
margin-left:10px;
}