JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<script id='template' type='text/ractive'>
    <ul>
        {{#foo}}
            <li></li>
        {{/foo}}
    </ul>
</script>

CSS

li {
    display: inline-block;
    margin: 10px;
    height: 300px;
    width: 300px;
    background: #C0C0C0;
}
main li {
    background: #444444;
}
ul {
    list-style: none;
    padding: 0;
    text-align: justify;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        foo: [1, 2, 3, 4, 5]
    },
    preserveWhitespace: true
});