JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: inline-block"><div id="imageContainer"></div></div>
 <h1>Live HTML and CSS image mapping!</h1>

CSS

#imageContainer {
    position: relative;
}
#imageContainer div {
    position: absolute;
    width: 10px;
    height: 10px;
}

JavaScript

window.onload = function () {
    //declare array with image information
    //input as [X,Y,Color]
    var image = [
        [0, 0, 'red'],
        [0, 10, 'blue'],
        [0, 20, 'black'],
        [0, 30, 'orange'],
        [10, 0, 'black'],
        [10, 10, 'yellow'],
        [10, 20, 'green'],
        [10, 30, 'purple'],
        [20, 0, 'blue']
    ];
    var imageContainer = document.getElementById('imageContainer');

    for (var i = 0; i != image.length; i++) {
        var pixel = document.createElement('div');
        pixel.style.top = image[i][0] + 'px';
        pixel.style.left = image[i][1] + 'px';
        pixel.style.backgroundColor = image[i][2];
        console.log(pixel.style.backgroundColor);
        imageContainer.appendChild(pixel);
    }
    imageContainer.style.fontSize = '0px';
};