JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
	<nav class="navbar navbar-default" role="navigation">
			<div class="container">
					<div class="navbar-header">
							<button type="button" class="navbar-toggle toggled" data-toggle="collapse" data-target="#navbar-collapse">
									<i class="fa fa-bars"></i>
							</button>
							<a href="#" class="navbar-brand"><img src="http://passport.mobilenations.com/avatars/000/006/045/100x100_6045530.jpg" class="img-responsive" /></a>
					</div>
					<div class="collapse navbar-collapse" id="navbar-collapse">
							<ul class="nav navbar-nav">
									<li><a href="#">Home</a></li>
									<li><a href="#">Communities</a></li>
									<li><a href="#">Pronto</a></li>
									<li><a href="#">Gallery</a></li>
									<li><a href="#">Virtual Tours</a></li>
									<li><a href="#">Design Centre</a></li>
									<li><a href="#">Customer Care</a></li>
							</ul>
							<ul class="side-img nav navbar-nav pull-right">
									<li><a href="#"><img src="http://passport.mobilenations.com/avatars/000/006/045/100x100_6045530.jpg" class="img-responsive"/></a></li>
									<li><a href="#"><img src="http://passport.mobilenations.com/avatars/000/006/045/100x100_6045530.jpg" class="img-responsive"/></a></li>
							</ul>
					</div>
			</div>
	</nav>
</div>

CSS

.navbar-brand {
    height:auto;
}
.navbar-brand img {
    max-height: 50px;
}
.side-img img{
    max-height: 50px;
}
.navbar-nav {
    font-size: 10px;
}