JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

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

CSS

body {
    font-family: monospace;
    font-weight: 200;
    color: #353535;
}

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

JavaScript

var html = '<!DOCTYPE html>'
+ '<html lang="en">'
+ '<head>'
+ '    <meta charset="UTF-8">'
+ '    <title>${title}</title>'
+ '</head>'
+ '<body>'
+ '{{hello}} World!'
+ '</body>'
+ '</html>';

document.body.textContent = (
    new Ractive({
        template: new Ractive({
                template: html
              , data: {
                    hello: "Hello"
                }
            }).toHTML(),
        data: {
            title: "hi"
        },
        delimiters: [ '${', '}' ]
    }).toHTML()
);