JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="img-container">
    <h1>Nearest Neighbor</h1>
    <div id="output1"></div>
    <div id="zoomed-output1"></div>
</div>
<div class="img-container">
    <h1>Bilinear Interpolation</h1>
    <div id="output2"></div>
    <div id="zoomed-output2"></div>
</div>
<div class="img-container">
    <h1>Bicubic Interpolation</h1>
    <div id="output3"></div>
    <div id="zoomed-output3"></div>
</div>

CSS

body {
    background:#ccc;
}

.img-container {
    margin-left:10px;
    margin-bottom:20px;
    clear:both;
}

.img-container div {
    float:left;
}

JavaScript

// Image data comes from some silly job-challenge thingy
// That is why it is in this terrible format

var image1      = {};
image1.width    = 12;
image1.height   = 12;
image1.data     = [
'ffffff', 'ffff8a', '898943', '4343cb', 'cacaf3', 'f3f3fb', 'fafbfb', 'fbfbf3', 'f3f3e8', 'e9e9f0', 'f1f1ff', 'ffffff', 'fffffe', 'fefe6e', '6e6e01', '000005', '030286', '8686e9', 'eaebd7', 'd6d7e0', 'dfdfec', 'ededf4', 'f5f5ff', 'ffffff', 'ffffff', 'ffffc0', 'bfbf31', '343573', '7b7da3', 'a7a8f0', 'f2f3e0', 'e9ebe1', 'ecede5', 'e6e7fc', 'fcfcff', 'ffffff', 'ffffff', 'ffff91', '8b8b97', 'a6a960', '959d9e', 'bec098', '9596bf', 'e1e5a3', 'c7cce6', 'e9eafb', 'fbfbff', 'ffffff', 'fffffa', 'fafaa7', 'a4a55d', '61639f', 'bdbd66', '767311', '1a1675', '84839d', 'b3b1e3', 'e5e5fb', 'fbfcfc', 'fcfcf9', 'fafad6', 'd8d8e1', 'e5e4d4', 'cdd1bc', '435b5d', '10253b', '182048', '0010a3', '233ff5', 'f0f4ee', 'f2f1e9', 'eaeafe', 'fefef3', 'f3f4ef', 'f0f0f3', 'f5f7d7', 'b5b8ca', '537297', '003499', '2545c4', '9fa4fb', 'fffff8', 'f9f9f7', 'f7f7ff', 'ffffff', 'fffff8', 'f8f8fb', 'fbfbd1', 'd8d743', '565116', '211ccc', 'dfd9ff', 'ffffaa', 'a9a9d7', 'd7d7ff', 'ffffff', 'ffffff', 'fffffe', 'fefec6', 'c7c712', '101000', '00001a', '1818cb', 'cbcbe4', 'e4e51c', '1b1bb2', 'b2b2ff', 'ffffff', 'ffffff', 'ffffff', 'ffff85', '85851a', '181873', '71716b', '6a6a79', '77773b', '393905', '0304b5', 'b5b5ff', 'fffffe', 'fefefd', 'fdfde8', 'e9ead4', 'd4d5ae', 'adaeff', 'ffffff', 'fffff9', 'f9f922', '202000', '00009f', '9f9fff', 'fffff6', 'f6f7e7', 'e9e9d9', 'dadbd9', 'dadbda', 'dcddc9', 'cbcdca', 'cbcdd4', 'd5d6a3', 'a3a391', '9091dc', 'dcdcf9', '00ffff' ];

var image2      = {};
image2.width    = 12;
image2.height   = 12;
image2.data     = [
'ffffff', 'ffff8d', '8c8c44', '4444ca', 'c9caf3', 'f3f5fb', 'fbf6fb', 'fbf6fc', 'f8b4fc', 'f56afb', 'f7b4fe', 'ffffff', 'fffffe', 'fefe6f', '6d6d00', '000005', '040e8f', '8c3ffc', 'f75df0', 'e649f7', 'ef4dfd', 'f77ffc', 'fac2fe', 'ffffff', 'ffffff', 'ffffbe', 'bebe38', '343079',...