JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="container"></div>

CSS

.container {
    width: 256px;
}

.px {
    float: left;
    width: 1px;
    height: 1px;
}

JavaScript

var $container = $('.container');

function addPixel(r, g, b) {
    var bg = 'rgb(' + r + ',' + g + ',' + b + ')',
        content = '<div class="px" style="background-color: ' + bg + '"></div>';

    $container.append(content);
}

(function() {
    var r, g, b;

    for (r = 0; r < 256; r += 1) {
        addPixel(r, 0, 0);
    }

    for (g = 0; g < 256; g += 1) {
        for (r = 0; r < 256; r += 1) {
            addPixel(r, g, 0);
        }
    }

    for (b = 0; b < 256; b += 1) {
        for (g = 0; g < 256; g += 1) {
            for (r = 0; r < 256; r += 1) {
                addPixel(r, g, b);
            }
        }
    }
}());