JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav class="navbar navbar-inverse shadow main-menu" role="navigation">
<li><a href="#" id="nav-login-btn" data-toggle="dropdown">Log In</a>
          <div id="togglesection" class="dropdown-menu nav-login">
          	<div id="loginsection">
              <form class="form-horizontal" role="form">
                  <div class="form-group">
                      <label for="loginEmail" class="col-lg-3 control-label">Email</label>
                      <div class="col-lg-9">
                          <input type="email" class="form-control" id="loginEmail" placeholder="Email">
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="loginPassword" class="col-lg-3 control-label">Password</label>
                      <div class="col-lg-9">
                          <input type="password" class="form-control nopaste" id="loginPassword" placeholder="Password">
                      </div>
                  </div>
                  <button type="button" id="loginsubmit" style="margin:0 auto; display:block;" class="btn btn-themeblue btn-lg">Log In</button>
                  <span style="text-align:center; display:block; margin:5px;" id="loginstatus"></span>
              </form>
            </div>
            <div id="profilesection">
            </div>
          </div>
          </li>
    </div>

JavaScript

$(function(){
	$("#nav-login-btn").click(function(){
		if(!($("#togglesection").is(":visible"))) {
			$("#nav-login-btn").css({"background-color":"#fff", "color":"#222"});
			$("#togglesection").show();
		}
		else {
			$("#nav-login-btn").css({"background-color":"transparent", "color":"#fff"});
			$("#togglesection").hide();
		}
	})
	$(document).mouseup(function (e)
	{
	    if (!$("#togglesection").is(e.target) && $("#togglesection").has(e.target).length === 0)
    	{
        	$("#togglesection").hide();
			$("#nav-login-btn").css({"background-color":"transparent", "color":"#fff"});
    	}
	});
});