JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <h2>fruits</h2>
    <list items='{{fruits}}'/>
    
    <h2>animals</h2>
    <list items='{{animals}}'/>
    
    <h2>bizarro world inhabitants</h2>
    <list items='{{people}}' bizarro='true'/>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var List = Ractive.extend({
    template: '<ul>{{#items}}{{>item}}{{/items}}</ul>',
    partials: {
        item: function ( data ) {
            if ( data.bizarro ) {
                return '<li>{{reverse(this)}}</li>'
            }
            
            return '<li>{{this}}</li>'
        }
    },
    data: {
        reverse: function ( str ) {
            return str.split('').reverse().join('');
        }
    }
});

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        fruits:  [ 'apple', 'banana', 'coconut' ],
        animals: [ 'aardvark', 'bear', 'cat' ],
        people:  [ 'alice', 'bob', 'charles' ]
    },
    components: {
        list: List
    }
});