JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div style="width: 300px; height: 200px" class="colour"></div>
    <div>
        <input type="range" min="0" max="255" class="red" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="red_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="green" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="green_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="blue" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="blue_number"></span>
    </div>
    <div>
        <input type="button" value="Reset" onclick="reset();" />
    </div>
</div>

<div>
    <div style="width: 300px; height: 200px" class="colour"></div>
    <div>
        <input type="range" min="0" max="255" class="red" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="red_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="green" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="green_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="blue" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="blue_number"></span>
    </div>
    <div>
        <input type="button" value="Reset" onclick="reset();" />
    </div>
</div>
<div>
    <input type="button" value="Back in time" onclick="back_in_time();" />
    <ol id="history"></ol>
</div>

JavaScript

// STATE
var colour = [0, 0, 0];
var _history = [colour];

// ELEMENTS
var colour_fields = [],
    inputs = [],
    reds = [],
    greens = [],
    blues = [],
    red_numbers = [],
    green_numbers = [],
    blue_numbers = [],
    active_dragging = null,
    history_element;

function back_in_time() {
    if (_history.length < 2) {
        return;
    }
    _history.pop();
    colour = _history[_history.length - 1];
    redraw();
}

function start_dragging(element) {
    active_dragging = element;
}

function end_dragging() {
    active_dragging = null;
}

function changed(element) {    
    switch (element.className) {
        case "red":
             colour = [
                element.value,
                colour[1],
                colour[2]
            ];
            break;
        case "blue":
             colour = [
                colour[0],
                colour[1],
                element.value
            ];
            break;
        case "green":
             colour = [
                colour[0],
                element.value,
                colour[2]
            ];
            break;
    }
    update_history();
    redraw();
}

function dragging() {
    if (active_dragging === null) {
        return;
    }
    changed(active_dragging);
}

function redraw() {
    colour_fields.forEach(function (e) {
        var new_value = "rgb(" + colour[0] + ", " + colour[1] + ", " + colour[2] + ")";
        if (e.style.backgroundColor !== new_value) {
            e.style.backgroundColor = new_value;
        }
    });
    reds.forEach(function (e) {
        if (e.value !== colour[0]) {
            e.value = colour[0];
        }
    });
    greens.forEach(function (e) {
        if (e.value !== colour[1]) {
            e.value = colour[1];
        }
    });
    blues.forEach(function (e) {
        if (e.value !== colour[2]) {
            e.value = colour[2];
        }
    });
    red_numbers.forEach(function (e) {
        var string_value = colour[0].toString();
...