JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div id='container'>
    <div class='swatch' id='el'></div>
    </div>

CSS

/***
Spectrum: The No Hassle Colorpicker
https://github.com/bgrins/spectrum

Author: Brian Grinstead
License: MIT
***/

.sp-container { 
    position:absolute; 
    top:0; 
    left:0; 
    display:none;
}
.sp-container.sp-flat {
    position: relative;
}
.sp-container.sp-show {
    display:inline-block;
}
/* 
   Keep square proportions using percentage widths.
   Basic aspect ratio technique modified from:
   http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
*/


.sp-top {
  position:relative; 
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute; top:0; left:0; bottom:0; right:0;
}
.sp-color { 
    position: absolute;
    top:0;left:0;bottom:0;right:20%;
}
.sp-hue {
    position: absolute;
    top:0;right:0;bottom:0;left:83%;
}
.sp-fill { 
    margin-top: 80%;  /* Same as sp-color width */
}
.sp-sat, .sp-val { 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

/* Don't allow text selection */
.sp-replacer, .sp-preview, .sp-dragger, .sp-slider , .sp-container.sp-dragging .sp-input, .sp-container button  { 
    -webkit-user-select:none; user-select: none; 
}

.sp-range-container input { width: 80%; }
.swatch-inner { position:absolute; top:0; left:0; right:0; bottom:0; display:block; }
.sp-replacer, .swatch {
    display: inline-block;
    position:relative;
    vertical-align: baseline;
    margin-left: 1px;
    margin-right: 2px;
    margin-bottom: -1px;
    width: 1em;
    height: 1em;
    background-image: url(https://github.com/bgrins/spectrum/raw/devtools/checker.png);
    border: 1px solid rgba(128, 128, 128, 0.6);
}

.sp-replacer:hover {
    border: 1px solid rgba(64, 64, 64, 0.8);
}
.sp-preview { width:100%; height:100%;}

/* Replacer (the little preview div that shows up instead of the <input>) 
.sp-replacer {
    margin:0;
    border-radius: 5px;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    zoom: 1;
    *display: inline;
}
.sp-dd { 
   ...

JavaScript

window.onload = function() {
    var swatch = document.getElementById('el');
    var spectrum = new WebInspector.Spectrum(swatch, [255, 126, 255, 1]);    
    
    swatch.onclick = function(e) {
        spectrum.show(e);
    };
    
    //document.body.appendChild(spectrum.element);
    spectrum.addChangeListener(function(color) {
        console.log("rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", " + color[3] + ")");
    });

};

var WebInspector = { };

WebInspector.Spectrum = function(swatch, rgb)
{
    var document = this.document = swatch.ownerDocument;
    this.element = document.createElement('div');
    this._inputElement = document.createElement('input');
    this.swatch = swatch;
    this.swatchInner = document.createElement('span');
    this.swatchInner.className = 'swatch-inner';
    this.swatch.appendChild(this.swatchInner);
    
    this.element.className = "sp-container sp-dev";
    this.element.innerHTML = [
        "<div class='sp-top sp-cf'>",
            "<div class='sp-fill'></div>",
            "<div class='sp-top-inner'>",
                "<div class='sp-color'>",
                    "<div class='sp-sat'>",
                        "<div class='sp-val'>",
                            "<div class='sp-dragger'></div>",
                        "</div>",
                    "</div>",
                "</div>",
                "<div class='sp-hue'>",
                    "<div class='sp-slider'></div>",
                "</div>",
            "</div>",
        "</div>",
        "<div class='sp-range-container'>",
            "<input type='range' class='sp-range' min='0' max='100' />",
        "</div>"
    ].join('');
    this.element.addEventListener("click", WebInspector.Spectrum.stopPropagation, false);
    swatch.parentNode.insertBefore( this.element, swatch.nextSibling );
    
    
    var that = this;
    
    this.slider = this.element.querySelectorAll(".sp-hue")[0];
    this.slideHelper =...