JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rainbow"></div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#rainbow {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
}

JavaScript

function Rainbow(el, opts) {
    var self = this;
    this.el = el;
    this.opts = opts;

    this.pixelSize = this.opts.pixelSize || 1;
    
    this.height = this.el.clientHeight;
    this.width = this.el.clientWidth;
    this.cache = document.createDocumentFragment();

    this.getRandomColor = function() {
        return '#' + Math.random().toString(16).substr(-6);
    };

    this.createPixel = function (x, y, color) {
        color = color || self.getRandomColor();
        var pixel = document.createElement('div');
        pixel.style.height =  self.pixelSize + 'px';
        pixel.style.width =  self.pixelSize + 'px';
        pixel.style.position = 'absolute';
        pixel.style.left = x * self.pixelSize + 'px';
        pixel.style.top = y * self.pixelSize + 'px';
        pixel.style.background = color;
        
        self.cache.appendChild(pixel);
        return pixel;
    };

    function initialize() {
        var x = 0;
        var y = 0;
        self.el.style.position = 'relative';

        for(var x = 0; x <= self.width / self.pixelSize; x++) {
            for (var y = 0; y <= self.height / self.pixelSize ; y++) {
                var predef = (self.opts.forced[x]) ? self.opts.forced[x][y] : undefined;
                self.createPixel(x, y, predef);
            }
        }
        
        self.el.appendChild(self.cache);
    };

    return {
        initialize: initialize
    };
}

var el = document.getElementById('rainbow');
new Rainbow(el, {
    pixelSize: 10,
    forced: {
        0: {
            0: '#000000'
        },
        1: {
            1: '#ff0000'
        }
    }
}).initialize();