JSFiddle - React, Tailwind, and code Playground

by Christian Gambardella

HTML

<div id="colors"></div>

CSS

.color {
    width: 100px;
    height: 20px;
}

JavaScript

var colors = $('#colors'),
    rgb, tmp;

for(var i = 0; i <= 100; i++) {
    if (i < 50) {
        tmp = Math.floor( i * 0.02 * 255 );
        console.log("open: ", tmp);
        rgb = 'rgb('+ 255-tmp +',' + tmp + ',0)';
    } else {
        tmp = Math.floor( (i-50) * 0.02 * 255 );
        // dreht den wert um
        tmp = (tmp-255) * (-1);
        console.log("unten: ", tmp);
        rgb = 'rgb('+ tmp +','+255-tmp+',0)';
    }
    
    colors.append('<div class="color" style="background-color: ' + rgb + '" />');
}