JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<div class="d">
hello world
</div>

CSS

.d {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#888), to(#767676));
    padding: 10px
}

JavaScript

function Color(r, g, b, a) {
    this.R = r || 255;
    this.G = g || 255;
    this.B = b || 255;
    this.A = a || 255;

    this.toString = function() {
        return 'rgb(' + this.R + ', ' + this.G + ', ' + this.B + ')';
    };
}

var TopBar = new Color(45, 45, 48);
var MaxAlpha = 255;

var gradient = {
    GradientStops: [],
    HexStops: []
};
gradient.GradientStops[0] = makeColor(TopBar, MaxAlpha, 70, 59, 44);
gradient.GradientStops[1] = makeColor(TopBar, MaxAlpha, 26, 23, 18);
gradient.GradientStops[2] = makeColor(TopBar, MaxAlpha, 17, 16, 15);
gradient.GradientStops[3] = TopBar;

console.log(gradient);
gradient.HexStops[0] = colorToHex(gradient.GradientStops[0].toString());
console.log(gradient);
gradient.HexStops[1] = colorToHex(gradient.GradientStops[1].toString());
console.log(gradient);

var css = '-webkit-gradient(linear, 0 0, 0 100%, from({{FromColor}}), to({{ToColor}}))'
css = css.replace('{{FromColor}}', gradient.HexStops[0]);
css = css.replace('{{ToColor}}', gradient.HexStops[1]);
console.log(css);
console.log($('.d'));
$('.d').css({
    'background-image': css
});

function makeColor(BaseColor, alpha, redChange, greenChange, blueChange) {
    var Alpha;
    var Red;
    var Green;
    var Blue;

    var MaxRange = 256;
    Alpha = alpha;
    Red = BaseColor.R + redChange;
    Green = BaseColor.G + greenChange;
    Blue = BaseColor.B + blueChange;

    var tempColor = new Color();
    tempColor.A = Alpha;

    if (Red < MaxRange && Red > 0) tempColor.R = Red;
    else tempColor.R = 255;

    if (Green < MaxRange && Green > 0) tempColor.G = Green;
    else tempColor.G = 255;

    if (Blue < MaxRange && Blue > 0) tempColor.B = Blue;
    else tempColor.B = 255;

    return tempColor;
}


function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue =...