JSFiddle - React, Tailwind, and code Playground

HTML

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

<script id='template' type='text/ractive'>
    <div class='fileSystem'>
        <folder href='{{root.href}}' files='{{root.files}}'/>
    </div>
</script>

<script id='folder' type='text/ractive'>
    <ul class='folder'>
        {{#files}}
        <file href='{{href}}/{{filename}}'/>
        {{/files}}
    </ul>
</script>

<script id='file' type='text/ractive'>
    <li class='file'>
        <img class='icon-{{type}}'/>
        <span><button on-click="debug" href="{{href}}">{{filename}}</button></span>
        
        <!-- if this is actually a folder, embed the folder partial -->
        {{# type === 'folder' }}
        <folder href='{{href}}' files='{{files}}'/>
        {{/ type === 'folder' }}
    </li>
</script>

CSS

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

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

JavaScript

var data = {
    root: {
        href: 'http://some/root/href',
        files: [
            { type: 'jpg', filename: 'hello.jpg' },
            { type: 'mp3', filename: 'NeverGonna.mp3' },
            { type: 'folder', filename: 'subfolder', files: [
                { type: 'txt', filename: 'README.txt' },
                { type: 'folder', filename: 'rabbithole', files: [
                    { type: 'txt', filename: 'Inception.txt' }
                ]}
            ]}
        ]
    }
};

Ractive.components.folder = Ractive.extend({
    template: '#folder'
});

Ractive.components.file = Ractive.extend({
    template: '#file'
});

// YOUR CODE GOES HERE
ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: data
});

ractive.on('*.debug', function(x) {
    console.log( this.event.component.get());
    return false;
});