JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<div id="navbar-collapse-01" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
	<li class="dropdown">
		<a data-toggle="dropdown" class="dropdown-toggle">menu 1</a>
	</li>
	<li class="dropdown">
		<a data-toggle="dropdown" class="dropdown-toggle">menu 2</a>
	</li>
	<li class="dropdown">
		<a data-toggle="dropdown" class="dropdown-toggle">menu 3</a>
	</li>
	<li class="dropdown">
		<a data-toggle="dropdown" class="dropdown-toggle">menu 4</a>
	</li>
	<li class="dropdown">
		<a data-toggle="dropdown" class="dropdown-toggle">menu 5</a>
	</li>
	
</ul>
<form style="width: 195px" role="search" method="get" action="/search" class="navbar-form navbar-right hidden-sm">
	<div class="form-group">
		<div class="input-group">
			<input type="search" placeholder="Search" id="navbarInput-01" class="form-control" value="" name="q">
			<span class="input-group-btn">
				<button class="btn fui-search" type="submit"></button>
			</span>
		</div>
	</div>               
</form>
</div>

CSS

@media only screen and (max-width :991px){
.navbar-nav  li  a{
font-size:14px !important;
}
}

/* NAV BAR */
.dropdown-arrow{right:50px}.navbar-form{padding:9px 3px}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:21px;padding-left:21px}@media (min-width:768px){.navbar-collapse .navbar-nav.navbar-left:first-child{margin-left:-21px}.navbar-collapse .navbar-nav.navbar-left:first-child>li:first-child a{border-bottom-left-radius:6px;border-top-left-radius:6px}.navbar-collapse .navbar-form.navbar-right:last-child{margin-right:-17px}}.navbar-toggle{border:none;color:#34495e;margin:0 0 0 21px;padding:0 21px;height:53px;line-height:53px}.navbar-toggle:before{color:#16a085;content:"\e00c";font-family:Flat-UI-Icons;font-size:22px;font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-transition:color .25s linear;transition:color .25s linear}.navbar-toggle:focus,.navbar-toggle:hover{outline:0}.navbar-toggle:focus:before,.navbar-toggle:hover:before{color:#1abc9c}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:0}.navbar-nav>li>a{font-size:16px;padding:15px 21px;line-height:23px;font-weight:700}.navbar-nav .dropdown-toggle .caret{border-top-color:#16a085;border-bottom-color:#16a085;border-width:8px 6px 0;margin-left:12px}.navbar-nav>li>a:focus,.navbar-nav>li>a:hover{background-color:transparent}.navbar-nav>li>a:focus .caret,.navbar-nav>li>a:hover .caret{border-top-color:#1abc9c;border-bottom-color:#1abc9c}@media (max-width:767px){.navbar-nav{margin:0 -21px}.navbar-nav>li>a{padding-top:7px;padding-bottom:7px}}.navbar-form{-webkit-box-shadow:none;box-shadow:none;margin-top:0;margin-bottom:0;padding-right:19px;padding-left:19px;padding-top:9px;padding-bottom:9px}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}}@media (max-width:767px){.navbar-form{margin:3px -21px;width:auto}}@media (min-width:768px){.navbar-form.navbar-right:last-child{width:260px}}.navbar-form .btn,.navbar-form...