JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<header class="navbar navbar-bright navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Category</a>
        </li>
        <li>
          <a href="#">Category</a>
        </li>
        <li>
          <a href="#">Category</a>
        </li>
        <li>
          <a href="#">Category</a>
        </li>
      </ul>
      <ul class="nav navbar-right navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
          <ul class="dropdown-menu" style="padding:12px;">
            <form class="form-inline">
              <button type="submit" class="btn btn-default pull-right"><i class="glyphicon glyphicon-search"></i></button><input type="text" class="form-control pull-left" placeholder="Search">
            </form>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

CSS

/* override bootstrap styles */
@import url('http://fonts.googleapis.com/css?family=Oswald:300,400:latin,latin-ext');

.navbar-form input, .form-inline input {
  width:auto;
}

body {
  padding-top:50px;
  color:#646464;
  background-color:#efefef;
}

h1,h2,h3,.highlight,.navbar a,#masthead h4 {
  font-family:'Oswald',arial narrow,sans-serif;
}
#topPanel {
  padding-top:0px;
  padding-left:22px;
  padding-right:22px;
}
#topPanel .panel-body {
  padding-top:0px;
}

.navbar.affix {
  position:fixed;
  top:0;
  width:100%;
}

.top-spacer {
  background-color:#ffffff;
  height:40px;
}

a,a:hover {
  color:#223344;
  text-decoration:none;
}

.icon-bar {
  background-color:#fff;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 80px;
  }
}

.navbar-bright {
  background-color:#111166;
  color:#fff;
  margin-bottom: 0;
  border-width: 0;
}

.navbar-bright a, .navbar-bright .navbar-brand, #masthead h4 {
  color:#ccccdd;
  font-size:14px;
  text-transform: uppercase;
  letter-spacing:.08em;
}

.navbar-bright li > a:hover {
  background-color:#000044;
}

.dropdown-menu {
  min-width: 250px;
}

.caret {
  color:#fff;
}

.navbar-toggle {
  color:#fff;
  border-width:0;
}

.navbar-toggle:hover {
  background-color:#fff;
}

.panel {
  border-color:transparent;
  border-radius:0;
}

.thumbnail {
  margin-bottom:8px;
}

.img-container {
  overflow:hidden;
  height:170px;
}

.img-container img {
  min-width:280px;
  min-height:180px;
  max-width:380px;
  max-height:280px;
}

.txt-container {
  overflow:hidden;
  height:100px;
}

.panel .lead {
  overflow:hidden;
  height:90px;
}

.label-float{
  margin:0 auto;
  position: absolute;
  top: 0;
  z-index: 1;
  width:100%;
  opacity:.9;
  padding:6px;
  color:#fff;
}

/* Uncomment to see how font changes but background doesn't */
li.dropdown.open {
  background-color:#000
}

li.dropdown.open > a {
  color:#000
}


/* Added code */

.navbar-right {
    margin-bottom: 0;
}

.navbar-right .dropdown-menu...