JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            
<ul class="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
            
<form class="navbar-search">
    <input type="text" class="search-query span3" placeholder="Search">
    <div class="icon-search"></div>
</form>
                
        </div>
    </div>
</div>

CSS

html, body { padding: 0; margin: 0;}

body { padding: 20px; }
  
.navbar-search {
    position: relative;
}
  
.navbar-search .search-query {
    padding-left: 29px !important;
}

.navbar-search .icon-search {
    position: absolute;
    top: 7px;
    left: 11px;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");
}