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, accounting) {
    var may2014 = {
        period : "May 2014",
        items  : [
            { 
                description : "Rent",
                type        : "expense",
                budget      : 1600,
                actual      : 1600
            },
            {
                description : "Salary",
                type        : "income",
                budget      : 5300,
                actual      : 4875
            },
            { 
                description : "Groceries",
                type        : "expense",
                budget      : 800,
                actual      : 650
            }
        ]
    };
    
    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 } onChange={ this.onChange }/>
                        </div>
                        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-3 actual">
                            <input type="text" value={ this.props.actual } onChange={ this.onChange } />
                        </div>
                    </div>;
        }
    });
    
    var Worksheet = React.createClass({
            getInitialState: function(){
                return {
                    period : "",
                    items  : [],
                    budgetExpense  : function() {
                        return this.items.reduce(function(accum, val){
                          return val.type === "expense" ? accum + val.budget : accum;
                        }, 0);
                    },
                    budgetIncome    : function() {
                        return this.items.reduce(function(accum, val){
                         ...