JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colorPicker"></div>
<div id="here"></div>
<input type="text" id="color" />

JavaScript

var colors = ["303030", "777777", "da0025", "f01800", "ff4300", "fd6c05", "feab07", "ffc91e", "93c900", "54c300", "00ab62", "00c3c4", "009bf0", "006afe", "3f00dd", "9025ff", "ff3ec2", "fe0b6b"];

var picker;

function createPicker() {
    //create picker wrapper
    picker = document.getElementById('colorPicker');
    //picker.id = "colorPicker";
    picker.style.display = "none"; // initialy invisible !
    picker.style.margin = "0";
    picker.style.padding = "0.5em";
    picker.style.backgroundColor = "rgb(30,30,30)";
    //create picker color options
    var newColor;
    for (var i = colors.length - 1; i >= 0; i--) {
        newColor = document.createElement('span');
        newColor.id = colors[i];
        //set style for color option
        newColor.style.display = "inline-block";
        newColor.style.width = "50px";
        newColor.style.height = "50px";
        newColor.style.margin = "0";
        newColor.style.padding = "0";
        newColor.style.backgroundColor = "#" + colors[i];
        //add onclick function

        newColor.addEventListener("click", (function (param) {
            return function() {
                pickColor(colors[param]);
            };
        })(i), true);

        //append option
        picker.appendChild(newColor);
    };
    //append colorPicker to file
    document.getElementById('here').appendChild(picker); // value must be set to the parent elements id !
}

function displayPicker() {
    picker.style.display = "inline-block";
}

function pickColor(id) {
    //set value
    console.log(id);
    var input = document.getElementById('color'); // must be the 'input' elements id that we want to set !
    //console.log(input);
    input.value = id;
    // hide picker
    picker.style.display = "none";
}

createPicker();
displayPicker();