JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="#0000FF" data-color="color_1">

<script>
$(document).ready(function(){
  var element = $('[data-color]');

  element.spectrum({showInput: true,
              preferredFormat: 'hex',
              color: '#0000FF'});

  console.log('val', element.val());
  console.log('spectrum', element.spectrum('get').toHexString());
});
</script>

CSS

/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
  position:absolute;
  top:0;
  left:0;
  display:inline-block;
  *display: inline;
  *zoom: 1;
  /* https://github.com/bgrins/spectrum/issues/40 */
  z-index: 9999994;
  overflow: hidden;
}
.sp-container.sp-flat {
  position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* 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:84%;
  height: 100%;
}

.sp-clear-enabled .sp-hue {
  top:33px;
  height: 77.5%;
}

.sp-fill {
  padding-top: 80%;
}
.sp-sat, .sp-val {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.sp-alpha-enabled .sp-top {
  margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
  display: block;
}
.sp-alpha-handle {
  position:absolute;
  top:-4px;
  bottom: -4px;
  width: 6px;
  left: 50%;
  cursor: pointer;
  border: 1px solid black;
  background: white;
  opacity: .8;
}
.sp-alpha {
  display: none;
  position: absolute;
  bottom: -14px;
  right: 0;
  left: 0;
  height: 8px;
}
.sp-alpha-inner {
  border: solid 1px #333;
}

.sp-clear {
  display: none;
}

.sp-clear.sp-clear-display {
  background-position: center;
}

.sp-clear-enabled .sp-clear {
  display: block;
  position:absolute;
  top:0px;
  right:0;
  bottom:0;
  left:84%;
  height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
 ...

JavaScript

// Spectrum Colorpicker v1.8.0
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT

(function (factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) { // AMD
        define(['jquery'], factory);
    }
    else if (typeof exports == "object" && typeof module == "object") { // CommonJS
        module.exports = factory(require('jquery'));
    }
    else { // Browser
        factory(jQuery);
    }
})(function($, undefined) {
    "use strict";

    var defaultOpts = {

            // Callbacks
            beforeShow: noop,
            move: noop,
            change: noop,
            show: noop,
            hide: noop,

            // Options
            color: false,
            flat: false,
            showInput: false,
            allowEmpty: false,
            showButtons: true,
            clickoutFiresChange: true,
            showInitial: false,
            showPalette: false,
            showPaletteOnly: false,
            hideAfterPaletteSelect: false,
            togglePaletteOnly: false,
            showSelectionPalette: true,
            localStorageKey: false,
            appendTo: "body",
            maxSelectionSize: 7,
            cancelText: "cancel",
            chooseText: "choose",
            togglePaletteMoreText: "more",
            togglePaletteLessText: "less",
            clearText: "Clear Color Selection",
            noColorSelectedText: "No Color Selected",
            preferredFormat: false,
            className: "", // Deprecated - use containerClassName and replacerClassName instead.
            containerClassName: "",
            replacerClassName: "",
            showAlpha: false,
            theme: "sp-light",
            palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]],
            selectionPalette: [],
            disabled: false,
            offset: null
        },
        spectrums = [],
        IE =...