JSFiddle - React, Tailwind, and code Playground

by revanur

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="row-fluid">
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner" id= "topbar">
			<div class="container">
				<a href="#"><img class = "brand" src="https://s3.amazonaws.com/sprc-www/img/logo.png" alt="SparkCharger" /></a>
				<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
				<div class = "nav-collapse">
					<ul class="nav pull-right">
						<li><form class="navbar-search brand">
						<input type="text" class="search-query" placeholder="Search"></form></li>
						<li><a href="#"> <h4> Discover </h4></a></li>
						<li><a href="#"> <h4> Blog </h4></a></li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#"><h4>Start <span class="caret"></span></h4></a>
							<ul class="dropdown-menu">
								<li><a href="#"> <h4> Login </h4></a></li>
								<li><a href="#"> <h4> Signup </h4></a></li>
							</ul>
					 	</li>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
	</div>

CSS

/* Body and structure  */
body,html{
	min-width: 280px;
}

body {
	margin-left: 0px;
	margin-right: 0px;
	width: auto;
	height: 100%;
}

#region{
	padding-top:45px;
	padding-bottom:0px;
	padding-left: 20px;
	padding-right: 20px;
	overflow:auto;
}

.navbar-inner {	
	background-color: rgba(224, 224, 224, 0.7);
	background-image: none;
	background-repeat: no-repeat;
	height: auto;
	filter: none;
}

.navbar-inner .container{
	background:transparent !important;	
}

.navbar{
	background:transparent !important;
}

.navbar .brand {
	overflow: visible;
	padding-top: 8px;
	padding-bottom: 2px;
	padding-left: 20px;
	max-height:50px;
}

.navbar .navbar-inner .lower a {
	color:#312f31;
}
.navbar .navbar-inner .lower a:hover{
	color:#e17d33;
}

#nav-main{
	background:transparent !important;
}

#banner{
	background:transparent !important;
}

.dropdown-menu .sub-menu {
	left: 100%;
	position: absolute;
	top: 0;
	visibility: hidden;
	margin-top: -1px;
	background-color: rgba(224, 224, 224, 0.7);
}

.dropdown-menu li:hover .sub-menu {
	visibility: visible;
	display: block;
}

.navbar .sub-menu:before {
	border-bottom: 7px solid transparent;
	border-left: none;
	border-right: 7px solid rgba(0, 0, 0, 0.2);
	border-top: 7px solid transparent;
	left: -7px;
	top: 10px;
}
.navbar .sub-menu:after {
	border-top: 6px solid transparent;
	border-left: none;
	border-right: 6px solid #fff;
	border-bottom: 6px solid transparent;
	left: 10px;
	top: 11px;
	left: -6px;
}