JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
    <ul id="wysiwyg-editor">
       
        <li class="main-btn">
            <a href="#" id="btn-color_font" class="wysiwyg-color-spectrum-cF">cF</a>
        </li>
        <li class="main-btn" >
            <a href="#" id="btn-color_background" class="wysiwyg-color-spectrum-bF">cB</a>
        </li>
        <span class="clear_both"></span>
    </ul>    
    
    
    <div id="content" contenteditable="true">
        <p> Hellow. I am a kitty. Please love me. PUrrrrrr.</p>
    </div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
.clear_both {
    display: block;
    clear: both;
}
body {
    font-family:'Open Sans', sans-serif;
}
#wysiwyg-editor {
    background: #e1e1e1;
    width: 500px;
    margin: 10px auto;
    border-radius: 4px;
    padding: 4px;
    font-size: 12pt;
}
#wysiwyg-editor li {
    list-style: none;
    text-align: center;
}
#wysiwyg-editor a {
    color: #333333;
    text-decoration: none;
}
#wysiwyg-editor .main-btn {
    float: left;
    padding: 5px;
    position: relative;
    min-width: 20px;
}
#wysiwyg-editor .main-btn:hover {
    background: #d3d3d3;
}
#wysiwyg-editor .main-btn ul {
    background: white;
    margin: 2px;
    box-shadow: 2px 2px 5px 1px lightgray;
    position: absolute;
    bot: 0;
    left: 0;
}
#wysiwyg-editor .main-btn ul li {
    padding: 5px;
}
#wysiwyg-editor .main-btn ul li:hover {
    background: #F2F1EF;
}
.wysiwyg-btn-extra-wrapper {
    font-size: 12pt;
    width: 320px;
    margin: 100px auto;
    box-shadow: 2px 2px 4px 0px lightgray;
}
.wysiwyg-btn-extra-wrapper #label {
    width: 120px;
    float: left;
}
.wysiwyg-btn-extra-wrapper label {
    display: block;
    margin: 10px;
}
.wysiwyg-btn-extra-wrapper #input {
    width: 200px;
    float: right;
}
.wysiwyg-btn-extra-wrapper input {
    max-width: 90%;
    font-size: 12pt;
    display: block;
    margin: 10px;
    border: none;
    border-bottom: 1px solid #ECECEC;
}
.wysiwyg-btn-extra-wrapper p {
    background: #e1e1e1;
    padding: 10px;
}
.wysiwyg-btn-extra-wrapper a {
    text-decoration: none;
    color: #333333;
}
/*content of the content*/
 #content {
    margin: 140px auto;
    width: 500px;
}

JavaScript

$(".wysiwyg-color-spectrum-cF").spectrum({
    showPaletteOnly: true,
    togglePaletteOnly: true,
    togglePaletteMoreText: 'more',
    togglePaletteLessText: 'less',
    color: 'blanchedalmond',
    change: function (color) {
        //WinSelection.restoreSelection();
        document.execCommand('foreColor', false, color.toHexString());
    },
    hideAfterPaletteSelect: true,
    palette: [
        ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
        ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
        ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
        ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
        ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
        ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
        ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
        ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
    ]
});

$(".wysiwyg-color-spectrum-bF").spectrum({
    showPaletteOnly: true,
    togglePaletteOnly: true,
    togglePaletteMoreText: 'more',
    togglePaletteLessText: 'less',
    color: 'blanchedalmond',
    change: function (color) {
        //WinSelection.restoreSelection();
        document.execCommand("BackColor", false, color.toHexString());
    },
    hideAfterPaletteSelect: true,
    palette: [
        ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
        ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
        ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
        ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
        ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
       ...