JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<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>

JavaScript

$('.dropdown-menu input').click(function(e) {
        e.stopPropagation();
    });