JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body></body>
</html>

JavaScript

function listFiles(files) {
    console.log('listing ' + files.length + ' files');
    var body = $('body');
    $.each(files, function(idx, file) {
        console.log('adding file ' + file.name + ' to body');
        body.append('<div>' + file.name + '</div>');
    });
}

function getFiles(fs) {
    console.log('Getting files');
    var files = [];
    var reader = fs.root.createReader();
    reader.readEntries(function(entries) {
        console.log('found ' + entries.length + ' files.');
        for (var i = 0; i < entries.length; i++) {
            entries[i].file(function(f) {
                console.log('adding file ' + f.name + ' to array');
                files.push(f);
            });
        }
    });
    listFiles(files);
}

function putFile(fs) {
    fs.root.getFile('log.txt', {
        create: true
    }, function(fileEntry) {

        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {

            fileWriter.onwriteend = function(e) {
                console.log('Write completed.');
            };

            fileWriter.onerror = function(e) {
                console.log('Write failed: ' + e.toString());
            };

            var bb = new WebKitBlobBuilder();
            bb.append('Lorem Ipsum');
            fileWriter.write(bb.getBlob('text/plain'));
        });
    });
}

$(function() {
    var self = this;
    self.fileSystem = null;

    window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
        putFile(fs);
        getFiles(fs);
    });
});