JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="https://raw.github.com/amccloud/backbone-bindings/master/backbone-bindings.js"></script>
<script id="meal-log" type="text/template">
    <h1 class="name"></h1>
    <p><label>Meal Name:</label> <input type="text" name="name"></p>
    <p><label>I have tried:</label> <input type="checkbox" name="tried"></p>
    <p><label>Notes:</label><textarea name="notes"></textarea></p>
    <input type="submit" value="Save">
</script>

CSS

body {
    background: #ccc;
    font-family: Helvetica;
    font-size: 14px;    
}

.meal-log {
    background: #fff;
    padding: 10px;
    margin: 10px;    
}

.tried {
    background: #DBFFE1;
}

h1 {
    font-size: 28px;  
    font-weight: bold;
    margin-bottom: 5px;    
}

p {
    margin-bottom: 10px; 
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], textarea {
    background: #fff;
    border: 1px solid #aaa;
    font-size: 16px;
    padding: 5px;
    width: 90%;
}

input[type="submit"] {
    cursor: pointer;
    background: green;
    color: #fff;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center; 
    padding: 6px 10px;
}

JavaScript

var categoryClassTransformer = function(value) {
    return (value) ? value.toLowerCase().replace(/ /g, '') : '';
};

var triedClassTransformer = function(value) {
    return (value == true) ? 'tried' : 'todo';
};

var Meal = Backbone.Model.extend({}),
    MealLogView = Backbone.View.extend({
        tagName: 'form',
        className: 'meal-log',
        template: _.template($('#meal-log').html()),
        bindings: {
            'class': ['category', categoryClassTransformer],
            'class': ['tried', triedClassTransformer],
            'text h1.name': 'name',
            'value input[name="name"]': 'name',
            'value textarea[name="notes"]': 'notes',
            'checked input[name="tried"]': 'tried'
        },
        events: {
            'submit': 'save'   
        },

        save: function(event) {
            alert("Save: " + JSON.stringify(this.model.toJSON()));
            return false;
        },
        render: function() {
            this.$el.html(this.template());
            return this.bindModel();
        }
    });

var meal = new Meal({
    category: "fastfood",
    name: "Coney",
    notes: "Delish!",
    tried: true
});

var logView = new MealLogView({
    model: meal
});

logView.render();
logView.$el.appendTo('body');