JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css "></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<section id="account-bar" class="shelf navbar-fixed-top">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
	</div>
	<div class="navbar-collapse collapse">
		<ul class="nav navbar-nav">
			<li><a href="#">Links</a></li>
			<li>
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<input type="text" placeholder="Email" class="form-control">
					</div>
					<div class="form-group">
						<input type="password" placeholder="Password" class="form-control">
					</div>
					<button type="submit" class="btn btn-success">Sign in</button>
				</form>
			</li>
			<li><i class="fa fa-lock"></i></li>
		</ul>
	</div>
</section>
        
        <br><br><br><br><br>You<br><br><br><br><br><br>Are<br><br><br><br><br><br><br>Scrolling<br><br><br><br><br><br><br><br><br>Down<br><br><br><br><br><br>The<br><br><br><br><br><br><br><br>Page<br><br><br><br><br><br><br><br><br>!<br><br>

CSS

section#account-bar {
background-color:#111;
color:#ccc;
font-size:1.1em;
height:3.6em;
line-height:3.4em;
text-align:right
}

section#account-bar:after {
content:'';
width:267px;
height:46px;
background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
background-size:267px 46px;
top:0;
left:0;
position:absolute;
}

#account-bar .navbar-toggle {
position:relative
}

#account-bar .navbar-nav {
float:right
}

#account-bar .navbar-nav a {
padding:0;
line-height:3.6em
}

#account-bar .navbar-form {
float:none!important;
display:inline!important
}

#account-bar .form-group {
margin: 0
}

#account-bar .btn {
margin:1px 0 0;
color:#A8A39F;
background-color: #363426;
background-image: -webkit-linear-gradient(top,#363426 0,#232519 100%);
background-image: linear-gradient(to bottom,#363426 0,#232519 100%);
background-repeat: repeat-x;
border-color: #333027
}

#account-bar .btn:hover, #account-bar .btn:active {
background-image: -webkit-linear-gradient(top,#232519 0,#363426 100%);
background-image: linear-gradient(to bottom,#232519 0,#363426 100%)
}

#account-bar .btn:focus {
background-position: 0;
outline: -webkit-focus-ring-color auto 0px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 0px
}

#account-bar .fa-lock {
font-size:1.8em;
line-height:1.9em;
margin:0 0.5em -0.2em;
color:#C6C7C7;
text-shadow:1px 1px #A8A39F
}