JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar-cont">
  <div class="container">
    <div class="row">
      <div class="span12">


<div class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="/">Home</a>
                </li>
                <li><a href="/products">Products</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>

			  <li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
				<ul class="dropdown-menu">
				  <li><a href="#">About Us</a></li>
				  <li><a href="#">Contact Us</a></li>
				  <li><a href="#">My Account</a></li> 
				  <li><a href="#">Wish List</a></li> 					
				</ul>
			  </li>		
						
			<li class="dropdown dropdown-large">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Large Dropdown <b class="caret"></b></a>

				<ul class="dropdown-menu dropdown-menu-large row">
					<li class="col-sm-3">
						<ul>
							<li class="dropdown-header">Glyphicons</li>
							<li><a...

CSS

body {
    background: #FFF;
    font: normal 12px/20px Arial, Helvetica, sans-serif;
    color: #666;
}

.navbar-cont {
    margin: 18px 0;
    background: #333;
	line-height: 40px;	
}


.navbar-top {
    background: #333;
}

/* Header */
.header {
	line-height: 40px;
}
.header .nav {
	margin-left: 10;
	width: auto;
}
.header .nav li a {
	margin: 0;
	padding: 0 10px;
	border-radius: 0;
	line-height: 40px;
	color: #FFF;
	display: block;
	transition: all linear 0.25s;
	-ms-transition: all linear 0.25s;
	-moz-transition: all linear 0.25s;
	-webkit-transition: all linear 0.25s;
	-o-transition: all linear 0.25s;
}
.header .nav li a:hover, .header .nav li.active a, .header .nav li.active a:hover {
	color: #333;
}

.navbar {
    border-radius: 0px;
    position: relative;
    min-height: 30px;
    margin-bottom: 0px;
    border: 0px;
	color: #333;	
}


.navbar-default {
    background-color: #333;
    border-color: #e7e7e7;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 10px;
}

.navbar-default .navbar-brand {
    color: #000000;
}
.navbar-default {
    font-size: 14px;
    background-color: rgba(51, 51, 51, 1);
    border-width: 0px;
    border-radius: 0px;
    font: normal 12px/20px Arial, Helvetica, sans-serif;	
}
.navbar-default .navbar-nav>li>a {
    color: #FFF;
    background-color: rgba(248, 248, 248, 0);
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 204, 0, 1);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(255, 204, 0, 1);
}
.navbar-default .navbar-toggle {
    border-color: #ffcc00;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ffcc00;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffcc00;
}
.navbar-default...