JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My todos</title>
    </head>
    <body>
        <form id="inputform">
            <input type="text" placeholder="Add a new todo..." />
        </form>

        <h1>my todos</h1>
        <div id="todos">
            <ul></ul>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://hay.github.com/stapes/stapes.min.js"></script>
    </body>
</html>

JavaScript

var TodosModel = Stapes.subclass();

var TodosView = Stapes.subclass({
    constructor : function(model) {
        this.$el = $("#inputform");
        this.model = model

        var $input = this.$el.find("input");

        this.$el.on('submit', function(e) {
            e.preventDefault();

            this.model.push( $input.val() );
            $input.val('');
        }.bind(this));
    }
});

var TodosController = Stapes.subclass({
    constructor : function() {
        this.model = new TodosModel();
        this.view = new TodosView( this.model );

        this.model.on('change', function(todoId) {
            var text = this.model.get( todoId );
            $("#todos ul").append('<li>' + text + '</li>');
        }.bind(this));
    }
});

var controller = new TodosController();