JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav pull-right">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>

                <li class="divider-vertical"></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Log in
                        <b class="caret"></b>
                    </a>
                    <div class="dropdown-menu">
                        <form action="/user/login" method="post" accept-charset="UTF-8">
                            <input id="username" class="text" type="text" name="username"
                                size="30" placeholder="User name" />

                            <input id="password" class="text" type="password" name="password"
                                size="30" placeholder="Password" />

                            <input id="remember_me" class="remember" type="checkbox"
                                name="remember_me" value="1" />

                            <label class="string optional"
                                for="remember_me"> Keep my session open
                                <i id="login_form_help" class="icon-question-sign" rel="tooltip" title="If you mark this option, we'll keep your session open, so that you won't have to enter your login data again in 30 days. After 30 days without entering the website, you'll have to login again."></i>
                                </label>

                            <input class="btn btn-primary"...

CSS

/*
Navbar forms
Adding a Drop Down Login Form to Bootstrap’s Navbar
http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/
*/

div.dropdown-menu {
    padding: 15px;
    padding-bottom: 0px;
}

div.dropdown-menu input.text {
    margin-bottom: 15px;
}

div.dropdown-menu input.remember {
    float: left;
    margin-right: 10px;
}

div.dropdown-menu input.btn {
    clear: left;
    width: 100%;
    height: 32px;
    font-size: 13px;
}

/*
Fix issue when showing tooltip in navbar login form: tooltip appears underneath the login form
Inspired by https://github.com/twitter/bootstrap/commit/12d3c2fe74bbe2570e47a2c8d7154a3011bd0770
*/

.dropdown-menu {
    z-index: 2050;
}

.tooltip {
    z-index: 2070;
}

JavaScript

// Adding a Drop Down Login Form to Bootstrap’s Navbar
// http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/
$(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();
    
    // Fix input element click problem
    $('.dropdown input, .dropdown label').click(function(e) {
        e.stopPropagation();
    });
});

// Tooltips in Bootstrap
// http://twitter.github.com/bootstrap/javascript.html#tooltips
$('#login_form_help').tooltip({
    'placement': 'bottom',
});