JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ractivejs.org/examples/lib/Ractive.js"></script>
<div id='container'></div>
  
<script id='main' type='text/ractive'>
    {{#foo.bar.items:i}}
        <button proxy-tap='doSomething'>{{i}}: {{description}}</button>
    {{/foo.bar.items}}
    
    <input proxy-change='addItem' placeholder='Add an item'/>
</script>

CSS

input {
    display: block;
}

JavaScript

var items, ractive;

items = [
    { description: 'one' },
    { description: 'two' },
    { description: 'three' }
];
    
ractive = new Ractive({
    el: 'container',
    template: '#main',
    data: {
        foo: {
            bar: {
                items: items
            }
        }
    }
});
                              
ractive.on({
    doSomething: function ( event ) {
        alert( event.keypath + ': "' + this.get( event.keypath + '.description' ) + '"' );
    },
    addItem: function ( event ) {
        items.unshift({ description: event.node.value });
    }
});