JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://bootswatch.com/paper/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
	<nav class="navbar navbar-default">
		<div class="container-fluid">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
				<a class="navbar-brand" href="#">
		      <img alt="Brand" src="http://www.cs.bilkent.edu.tr/~yenicag/kadu-logo.png" style="height: 100%;">
		    </a>
		  </div>

		  <!-- Collect the nav links, forms, and other content for toggling -->
		  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		    <ul class="nav navbar-nav">
		      <li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>
		      <li><a href="#">Link2</a></li>
		      <li><a href="#">Link3</a></li>
		      <li><a href="#">Link4</a></li>
		      <li><a href="#">Link5</a></li>
		      <li><a href="#">Link6</a></li>
		      <li><a href="#">Link7</a></li>
		    </ul>
				<form class="navbar-form navbar-right">
					<a href="#"><span class="fa fa-sign-in"></span>Login</a>
		     	<button type="submit" class="btn btn-custom"><span class="fa fa-search"> &nbsp;</span>Sign Up</button>
		    </form>
		  </div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>