JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">BRAND<span>LOGO</span></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">

          <!-- search bar -->
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>

          <!-- notification bell -->
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-notify">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li>
         ...

CSS

body {
  padding-top: 102px;
  background-color: #4d4d4d;
  font-family: 'Lato', verdana, sans-serif;
}

.container {
  width: 1530px;
  margin-top: 0;
}

.navbar-fixed-top {
  background-color: #fff;
}

.navbar-header {
  min-height: 80px;
}

.hamburger-icon {
  margin-top: 20px;
}

.navbar-default .navbar-brand {
  line-height: 45px;
  font-size: 45px;
  color: #010101;
  text-transform: uppercase;
}

.navbar-default .navbar-brand span {
  font-style: normal;
  color: #ff5500;
}

.search .input-group {
  padding-top: 15px;
  font-family: 'Lato', sans-serif;
}

.search .input-group input.search-field {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background-color: #fff;
  font-size: 18px;
  font-weight: 100;
}

.search .input-group input.search-field:hover {
  background-color: transparent;
}

.search .input-group-btn button {
  padding: 2px;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  border-radius: 0;
}

.search .input-group-btn button:hover {
  background-color: #f8f8f8;
  color: #ff5500;
}

.search .input-group-btn .glyphicon-search {
  font-size: 22px;
}

.dropdown-toggle.inbox {
  padding-top: 15px;
  margin-bottom: 5px;
}

.dropdown-menu li {
  width: 400px;
}

.dropdown-menu.bell {
  background-color: #f8f8f8;
  border-radius: 0;
  box-shadow: 0;
}

.dropdown-menu.bell h4 {
  padding: 10px 0;
  color: #010101;
  text-align: center;
  display: block;
}

.dropdown-menu.bell li a {
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: normal;
  word-break: break-word;
}

.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
  background-color: transparent;
}

.dropdown-menu.bell li.divider {
  padding: 0;
  margin: 0 20px;
}

.dropdown-menu.bell .label {
  background-color: transparent;
  color: #ff5500;
  font-weight: 100;
}

.badge-notify {
  background: #ff5500;
  margin-top: -24px;
  margin-left: -20px;
  height: 1.7em;
}


/* caret for notification dropdown */

.dropdown-menu.bell:before {
  position:...