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="http://placehold.it/269x50" alt="Logo" /></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>
    <article>
        This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This is...

CSS

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

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

#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;
}