JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<h2>one</h2>
<div id="one"></div>

<h2>two</h2>
<div id="two"></div>

<h2>three</h2>
<div id="three"></div>

<script id="template-one" type='text/ractive'>
    <div>
        {{#foo}}
            <p><div></div></p>
        {{/foo}}
    </div>
</script>

<script id="template-two" type='text/ractive'>
    {{#foo}}
        <p><div></div></p>
    {{/foo}}
</script>

<script id="template-three" type='text/ractive'>
    <p><div></div></p>
</script>

CSS

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

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

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

ractives = {};

[ 'one', 'two', 'three' ].forEach( function ( id ) {
    var node = document.getElementById( id );
    
    try {
        var ractive = new Ractive({
            template: '#template-' + id,
            preserveWhitespace: true
        });
        
        node.innerText = ractive.toHTML();
    } catch ( err ) {
        document.getElementById( id ).innerHTML = '<p class="error">' + err.message + '</p>';
    }
});