JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h3>Normal Search</h3>

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<input type="text" class="search-query span3" placeholder="Search">
</form>
</div>
</div>
</div>
    
<h3>Regular Input Add-On</h3>
<div class="input-append">
<input class="span2" type="text"><span class="add-on"><i class="icon-search"></i></span>
</div>

<h3>Navbar Overlay</h3>

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search&hellip;"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>

CSS

.navbar-inner {
    height: 40px;
}

.fornav {
    position:relative;
    margin-left:-22px;
    top:-3px;
    z-index:2;
}