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">
                        <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">
            </form>
        </div>
    </div>
</div>

CSS

.navbar-search .search-query {
    padding-left: 29px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ5JREFUeNpi+P//PwMQMANxERCfAeI/UBrEZwbJQ9WAFR0A4u1AbAnEbFB6O1ScGaawGoi3wHQiYyBYDZKHKbwHxLo4FOqC5GEKf4Ksw6EQ5IyfIDYTkPEUiNUZsAOQ+F9GRkYJEKcFiDficSOIcRjE4QTiY0C8DuRbqAJLKP8/FP9kQArHUiA+jySJjA8w4LAS5KZd0MAHhaccQIABALsMiBZy4YLtAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: 12px 8px;
}

.navbar-search .search-query:focus, .navbar-search .search-query.focused {
    padding-left: 30px;
    background-position: 13px 9px;
}