JSFiddle - React, Tailwind, and code Playground

CSS

body {
    margin: 0;
    /*background: #57e;*/
    /*background: black;
    color: white;*/
}
html, body, .main {
    width: 100%;
    height: 100%;
}
.main {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    
    color: #aaa;
}
.main>* {
    /*border-radius: 10px;*/
    /*padding: 10px;*/
    /*border: 3px dotted #aaa;*/
}
.main h1 {
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-weight: normal;
}

JavaScript

function init(main, data) {
    var words = Math.ceil(data.byteLength / 4);
    var size = Math.ceil(Math.sqrt(words));
    var width = 256, height = Math.ceil(words/width);
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    main.append(canvas);
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, width, height);
    //var styles = ['255,0,0', '0,0,255', '0,255,0', '255,255,255'];
    var modes = [];
    function ascii(i) {
        return data[i] > 0x40 && data[i] < 0x5B || data[i] > 0x60 && data[i] < 0x7B; // HACK A-Za-z.
    }
    for(var i = 0; i < data.byteLength; i++) {
        var mode, mul = 0, style;
        if((data[i] & 0xF0) == 0xE0) {
            mode = 1, mul = 4, style = '0,255,0';
            //i += 3;
        } else if(ascii(i) + ascii(i-1) + ascii(i-2) + ascii(i-3) > 2)
            mode = 2, mul = 4, style = '255,0,0';
        else
            continue;
        modes[i] = mode;
        var s = (modes[i-mul] === mode)+(modes[i-2*mul] === mode)+(modes[i-3*mul] === mode)+(modes[i-4*mul] === mode);
        ctx.fillStyle = 'rgba('+style+','+([0.01, 0.1, 0.2, 0.6, 1][s])+')';
        var j = i >>> 2;
        ctx.fillRect(j%width, ~~(j/width), 1, 1);
    }
    $('<button>').text('Save current view as image').click(function() {        
        // Get the PNG data: URL.
        var url = canvas.toDataURL();
        
        // Open a new page and add the image with some text.
        var w = open('about:blank');
        w.document.title = 'ARMalyzer';
        w.document.body.innerHTML = 'To save the image, right click and press "Save image as..."<br>';
        w.document.body.appendChild($('<img>').attr('src', url)[0]);
    }).appendTo(main);
}

$(function() {
    var main = $('<div class=main>').appendTo('body').append($('<h1>').html('Drop file here'));
    
    // Stops the browser from doing anything with the dropped files (see Firefox).
   ...