JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//rawgit.com/Fedia/unclejs/master/uncle.js"></script>
<script id="todo-tpl" type="text/html">
    <div>
        <h3>TODO</h3>
        <ul>
            {{this.items.map(this.TodoItem)}}
        </ul>
        <input onchange="this.onChange(event.target.value)" value="{{this.text}}" />
        <button onclick="this.onClick()">Add #{{this.items.length + 1}}</button>
    </div>
</script>
<script id="item-tpl" type="text/html">
    <li key="{{$index + itemText}}">{{itemText}}</li>;
</script>

JavaScript

var TodoApp = {
    text: '',
    items: [],
    onChange: function(new_text) {
        this.text = new_text;
        this.update();
    },
    onClick: function() {
        this.items.push({
            itemText: this.text
        });
        this.text = '';
        this.update();
    },
    render: uncle.render(document.getElementById('todo-tpl').text),
    update: uncle.update(document.body)
};
TodoApp.TodoItem = uncle.render(document.getElementById('item-tpl').text);

TodoApp.update();