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">
<div id="color-picker"></div>
<div id="output"></div>
<div id="text" contentEditable>text color to be changed</div>

<button  onclick="document.execCommand('ForeColor',false,'blue');">change color</button>

JavaScript

$('#color-picker').colorPicker(
            {            
              defaultColor:0, // index of the default color
              columns:13,     // number of columns 
              click:function(c){
                $('#output').html(c);
               // alert(c);
                document.execCommand('ForeColor',false,c);
              }
            });