JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.syronex.com/software/syronex-colorpicker.js"></script>
<link rel="stylesheet" href="http://www.syronex.com/software/syronex-colorpicker.css">
<!doctype html>
<html>
    <body>
<div id="color-picker"></div>
<div id="output"></div>
<div id="text" contenteditable="true">change color of selected text</div>
        <body>
        </html>

JavaScript

$(function() {
    function execCommandOnElement(el, commandName, value) {
        if (typeof value == "undefined") {
            value = null;
        }

        if (typeof window.getSelection != "undefined") {
            // Non-IE case
            var sel = window.getSelection();

            // Save the current selection
            var savedRanges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                savedRanges[i] = sel.getRangeAt(i).cloneRange();
            }

            // Temporarily enable designMode so that
            // document.execCommand() will work
            document.designMode = "on";

            // Select the element's content
            sel = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(el);
            sel.removeAllRanges();
            sel.addRange(range);

            // Execute the command
            document.execCommand(commandName, false, value);

            // Disable designMode
            document.designMode = "off";

            // Restore the previous selection
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedRanges.length; i < len; ++i) {
                sel.addRange(savedRanges[i]);
            }
        } else if (typeof document.body.createTextRange != "undefined") {
            // IE case
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.execCommand(commandName, false, value);
        }
    }

    $('#color-picker').colorPicker({
        defaultColor: 0,
        // index of the default color
        columns: 13,
        // number of columns 
        click: function(c) {
            
            execCommandOnElement($('#text')[0], 'ForeColor', c);
        }
    });
});