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 (e) {
        e.stopPropagation();
        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).click(function (e) {
        if (!$("#togglesection").is(e.target) && $("#togglesection").has(e.target).length === 0) {
            $("#togglesection").hide();
            $("#nav-login-btn").css({
                "background-color": "transparent",
                "color": "#fff"
            });
        }
    });
});