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'>
    <!-- output -->
    <div style='color: red'>
        {{#each range(0,list.length/2) }}
            <p>{{list[this]}}</p>
        {{/each}}
    </div>
    
    <div style='color: green'>
        {{#each range(list.length/2,list.length) }}
            <p>{{list[this]}}</p>
        {{/each}}
    </div>
    
    <!-- input (to prove two-way binding works!) -->
    <div style='color: red'>
        {{#each range(0,list.length/2) }}
            <input value='{{list[this]}}'/>
        {{/each}}
    </div>
    
    <div style='color: green'>
        {{#each range(list.length/2,list.length) }}
            <input value='{{list[this]}}'/>
        {{/each}}
    </div>
</script>

CSS

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

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

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        list: [
            'alice',
            'bob',
            'charles',
            'dawn',
            'erica',
            'fred'
        ],
        range: function ( start, end ) {
            var arr = [];
            for ( i = Math.floor(start); i < Math.floor(end); i += 1 ) {
                arr.push( i );
            }
            return arr;
        }
    }
});