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
body {
margin: .5em;
}
.budget-item span {
margin: 0 .5em 0 .25em;
}
.budget-item input {
margin: 0 .5em 0 0;
text-align: right;
width: 5em;
}
JavaScript 1.7
/** @jsx React.DOM */
(function(React) {
var Item = React.createClass({
render: function() {
return <div className="budget-item">
<span className="desc">Rent</span>
<input type="text" placeholder="budget" value="222" />
<input type="text" placeholder="actual" value="1600" />
</div>;
}
});
React.renderComponent( <Item /> , document.body);
}(React));