JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://hshelp.tk/questions/js/bootstrap-dropdown.js"></script>
<script src="http://hshelp.tk/questions/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://hshelp.tk/questions/css/bootstrap.css">
<ul class="nav pull-right" style="list-style: none; margin: 0 auto; width: initial;">
    <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Login <b class="caret"></b></a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
            <li role="presentation">
                <input name="username" type="text" placeholder="Username">
            </li>
            <li role="presentation">
                <input name="password" type="password" placeholder="Password">
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Login</a>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$(".dropdown-toggle").dropdown();