JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div id="navbar-example" class="navbar navbar-static">
	<div class="container" style="width: auto;">
		<div class="nav-collapse bs-js-navbar-collapse">
			<ul class="nav navbar-nav pull-left">
				<li id="sign-up-dropdown" class="dropdown closed noshow">
					<a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown">Sign Up<b class="caret">&nbsp;</b></a>
					<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
						<li role="presentation">
								<div class="login_dropdown platform-font-1">
									<form class="form-horizontal"  action="login" method="POST">
										<div class="form-group">
											<div class="col-lg-10">
												<input type="text" class="form-control " id="email" name="email" placeholder="Email">&#160;</input>
											</div>
										</div>
									</form>
								</div>
						 </li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<input type="text" class="form-control " id="email1" name="email" placeholder="Email">&#160;</input>

JavaScript

$('#email').on('keydown',function(e){
    e.stopPropagation();
});