JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div id="cn">
    &nbsp;
</div>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", Helvetica, Arial, FreeSans, sans-serif, "open-serif", open-serif;
    font-size: 10px;
    line-height: 10px;
    color: #8dc75d;
    background: #272727;
}

body > div {
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background: #8bd640;
    overflow: hidden;
}

JavaScript

var pixelator = function(container) {
    var c = $(container)
    if(c.length) {
        var settings = {
            pixel: {
                'w'            : 10,
                'h'            : 10,
                'space'        : 0,
                'bg'        : '#000'
            },
            stage: {
                'w'            : c.width(),
                'h'            : c.height()
            }
        };
        
        var helpers = {
        
            'pixelcounter'    : function() {
                return Math.round(helpers.rowcounter() * helpers.colcounter())
            },
            
            'rowcounter'    : function() {
                return settings.stage.w / ( settings.pixel.w + (settings.pixel.space * 2) )
            },
            
            'colcounter'    : function() {
                return settings.stage.h / ( settings.pixel.h + (settings.pixel.space * 2) )
            },
            
            'pixel'            : '<div style="float: left; width:' + settings.pixel.w + 'px; height: ' + settings.pixel.h + 'px; margin:' + settings.pixel.space + 'px; background:' + settings.pixel.bg + '"></div>'
        }
        
        var html = new Array( helpers.pixelcounter() + 1 ).join( helpers.pixel );
        
        var row = 0
        var col = 0
        var eq = 0        
        
        c.html(html)
         .find('div')
         .hover(function(){ $(this).trigger("turnOn") }, function(){ $(this).trigger("turnOff") })
         .each(function(i){
            
            var $that = $(this)
            
            if (i !=0 && $that.offset().top != $that.prev().offset().top){
                row++
                col = 0
            }
            
            $that.attr({'row': row, 'col': col })//.html('r' + row + ',c' + col)
            
            col++
            
        }).bind({ 
            turnOn: function(){ $(this).stop(false, true).fadeTo(300, .3) }, 
            turnOff: function(){ $(this).stop(false,...