JSFiddle - React, Tailwind, and code Playground

by April Sadowski

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="row"> 
        <div class="col-sm-6">
            <div class="row">
            <div class="col-sm-5">1</div>
            <div class="col-sm-2">2</div>
            <div class="col-sm-5">3</div>
            </div>
        </div>
        <div class="col-sm-6 navbar-right">
            <div class="row">
      <div class="col-sm-8">
          <form class="navbar-form navbar-right" role="search">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search" name="q">
                      <div class="input-group-btn">
                          <button class="btn btn-default" type="submit">
                              <i class="glyphicon glyphicon-search">
                              </i>
                          </button>
                      </div>
                  </div>
              </form><!--/form-->
          </div><!--/form column-->
          <div class="col-sm-4">
              <button type="button" class="btn btn-default navbtn navbar-btn">
                  <span class="glyphicon glyphicon-leaf"></span>
              </button> 
              <button type="button" class="btn btn-default navbtn  navbar-btn" >
                  <span class="glyphicon glyphicon-cog"></span>
              </button>
            </div><!--/buttons column-->
                </div><!--/row column-->
        </div><!--/right column-->
      </div><!--/row-->
      </div><!--/container-->
</nav> <!--/nav-->

CSS

.navbar-default {
    background-color:white;
}