JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/fschaefer/jquery-behavior/master/src/jquery.livequery.js"></script>
<script src="https://rawgithub.com/fschaefer/jquery-behavior/master/src/jquery.behavior.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="email">Email:</label>
        <div class="controls">
            <input type="text" id="email" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password:</label>
        <div class="controls">
            <input type="password" id="password" placeholder="Password">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox">Remember me</label>
            <button type="button" class="btn">Sign in</button>
        </div>
    </div>
</form>
<div class="container">
    <pre id="log"></pre>
</div>

JavaScript

function log() {
    $('#log').text(JSON.stringify(login));
}

var login = {
    username: 'root',
    password: 'insecure',
    remember: true
};

log();

$.behavior({
    '#email': {
        'transform': function () {
            $(this).val(login.username);
        },
        'keyup': function() {
            login.username = $(this).val();
            log();
        }
    },
    '#password': {
        'transform': function () {
            $(this).val(login.password);
        },
        'keyup': function() {
            login.password = $(this).val();
            log();
        }
    },
    ':checkbox': {
        'transform': function () {
            $(this)[0].checked = login.remember;
        },
        'change': function() {
            login.remember = $(this).is(':checked');
            log();
        }
    }
});