JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<img style="-webkit-user-select: none;"...

CSS

.square, .squareHistory {
    float:left;
    width:60px;
    height:60px;
    border:1px solid black;
    box-sizing:border-box;
}
.darker, .lighter, .white, .black {
    float:left;
    height: 60px;
    width:100%;
}
.darker .square {
    float: right;
}
.lighter .square {
    float: left;
}
.current {
    float:left;
    width:60px;
    height:60px;
}
.current .square {
    border:3px solid red;
}
input {
    width:100%;
    float:left;
}
.carou {
    width:100%;
    float:left;
}
.owl-item {
    width:auto !important;
}

JavaScript

function colorHistory(color) {
    var countHistory = $(".squareHistory").length;
    if (countHistory == 10) {
        $(".squareHistory").last().remove();
    }
    $(".history").prepend("<div class='squareHistory' style='background-color:#" + (color) + "'></div>");
}

function shadeDarker(color, percent) {
    var num = parseInt(color, 16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
    var test = (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);

    if (test != "000000") {
        $(".darker").append("<div class='square' style='background-color:#" + (test) + "'></div>");
    }
}

function shadeLighter(color, percent) {
    var num = parseInt(color, 16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
    var test = (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
    if (test != "ffffff") {
        $(".lighter").append("<div class='square' style='background-color:#" + (test) + "'></div>");
    }
}

function shadeCurrent(color, percent) {
    var num = parseInt(color, 16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
    var test = (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);

    $(".current").append("<div class='square' style='background-color:#" + (test) + "'></div>");
}

function runColorShade(changeColor) {
    $(".square").remove();
    var per1 = 0;
    var per2 = 0;
    var per3 = 0;
    var color = changeColor;
    for (i = 0; i <...