JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

<script id='application-layout' type='text/ractive'>
    <!DOCTYPE html> 
    <html>
        <head>
            {{! META tags section !}}
            <meta charset="utf-8" />
            {{>customMetaTags}}
    
            <title>{{docTitle}}</title>
    
            {{! STYLE tags section !}}
            <link rel="stylesheet" href="/styles/common.css" />
            {{>customStyles}}
    
            {{! Some dynamic hreader links (canonicals) !}}
            {{>customHeadLinks}}
        </head> 
    
        <body> 
            {{! Content header !}}
            {{>contentHeader}}
    
            {{! Main content section !}}
            {{>contentBody}}
    
            {{! Main menu section !}}
            {{>main-nav}}
    
            {{! Some pages need to include third-party scripts at the bottom of the page !}}
            {{>externalServicesScripts}}
        </body>
    </html>
</script>

<script id='home' type='text/ractive'>
    <application-layout>
        {{#partial customMetaTags}}
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
        {{/partial}}
        
        {{#partial customStyles}}
            <link rel="stylesheet" href="/styles/home.css" />
        {{/partial}}
        
        {{#partial contentBody}}
            {{! Landing main image !}}
            <img src="/images/landing.jpg"/>        
        {{/partial}}
    </application-layout>
</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

Ractive.components[ 'application-layout' ] = Ractive.extend({
    template: '#application-layout'
});

Ractive.components[ 'home' ] = Ractive.extend({
    template: '#home'
});

var ractive = new Ractive.components[ 'home' ]();

document.body.innerHTML = '<pre>' + ractive.toHTML() + '</pre>';