react template

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/accounting.js/0.3.2/accounting.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/postal.js/0.8.5/postal.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-0.10.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.worksheet-title {
	padding: 0 0 0 1em;
}

.budget-item {
	margin: 0 0 1% 0;
}

.budget-item .desc {
	/*margin-right: .5em;*/
}

.budget-item input[type="text"] {
	width: 5em;
	padding-right:5%;
	text-align: right;
	border-radius: 2px;
	border: 1pt solid rgba(49, 44, 113, .3);
}

.budget-item .budget input[type="text"] {
	background-color: rgba(183, 219, 162, .7);
}

.budget-item .actual input[type="text"] {
	background-color: rgba(250, 207, 185, .7);
}

.budget-item div:not(:first-child) {
	text-align: right;
}

.budget-item .header {
	font-weight: bold;
	text-align: left;
	color: rgba(49, 44, 113, .7);
}

.budget-item-add {
	padding: .5em 0 .25em 0;
	margin: 0 0 .5em 0;
	border: 1pt solid rgba(49, 44, 113, .15);
	border-radius: 5px;
}

.budget-item-add .ctrls {
	text-align: right;
}

.budget-item-add .desc input[type="text"]  {
	width: 100%;
	text-align: left;
}

.budget-item-add input[type="text"] {
	background-color: rgba(138, 135, 174, .4);
}

.budget-item-add select {
	background-color: rgba(138, 135, 174, .4);
	border: 1pt solid rgba(49, 44, 113, .15);
	width: 100%;
}

.budget-item button {
	width: 5em;
	text-align: center;
}

.amount {
	text-align: right;
}

.summary {
	border: 1pt solid rgba(49, 44, 113, .3);
	padding: 0 1.5em 1em 1.5em;
}

.summary-header {
	text-align: center;
}

.summary.budget {
	background-color: rgba(183, 219, 162, .7);
}

.summary.actual {
	background-color: rgba(250, 207, 185, .7);
}

.remainder {
	border-top: 1pt solid black;
	font-weight: bold;
}

JavaScript 1.7

/** @jsx React.DOM */
(function(React, postal, $) {
    var Item = React.createClass({
        render: function() {
            return  <div className="row budget-item">
                        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-6 desc"> { this.props.description }</div>
                        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-3 budget">
                            <input type="text" value={ this.props.budget } />
                        </div>
                        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-3 actual">
                            <input type="text" value={ this.props.actual } />
                        </div>
                    </div>;
        }
    });

    var ItemAdd = React.createClass({
        addItem: function(e) {
            e.preventDefault();
            postal.publish({
                channel: "worksheet",
                topic: "item.add",
                data: {
                    description : $("#item_desc").val(),
                    type        : $("#item_type").val(),
                    budget      : Number.parseFloat($("#item_budget").val()),
                    actual      : Number.parseFloat($("#item_actual").val())
                }
            });
        },

        render: function() {
            return  <div className="budget-item-add">
                        <div className="row budget-item">
                            <div className="col-xs-4 col-sm-4 col-md-4 col-lg-6 desc">
                                <input type="text" id="item_desc" placeholder="description" />
                            </div>
                            <div className="col-xs-4 col-sm-4 col-md-4 col-lg-3">
                                <input type="text" id="item_budget" placeholder="budget"/>
                            </div>
                            <div className="col-xs-4 col-sm-4 col-md-4 col-lg-3">
                                <input type="text" id="item_actual"...