JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<div id="colorDiskWrapper">
  <div id="colorDisk"></div>
  <div id="colorDiskCursor"></div>
</div>

CSS

#colorDisk {
  background-image: url("http://i.imgur.com/tX5NbWs.png");
  width: 350px;
  height: 350px;
  background-repeat: no-repeat;
  cursor: pointer;
}

#colorDiskCursor {
  position: absolute;
  border: 2px solid black;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  cursor: pointer;
}

JavaScript

(function(window) {
  "use strict"

  // Some common use variables
  var myColor = new Colors(),
    startPoint,
    currentTarget,
    currentTargetHeight = 0,
    PI = Math.PI,
    PI2 = PI * 2;


  /* ---------------------------------- */
  /* ---- HSV-circle color picker ----- */
  /* ---------------------------------- */
  var colorDiskWrapper = document.getElementById('colorDiskWrapper'),
    colorDiskCursor = document.getElementById('colorDiskCursor'),
    colorDisk = document.getElementById('colorDisk');

  var colorDiscRadius = colorDisk.offsetHeight / 2;

  // Create Event Functions
  var hsvDown = function(e) { // mouseDown callback
      var target = e.target || e.srcElement;

      if (e.preventDefault) e.preventDefault();
      if (target === colorDiskCursor || target === colorDisk) {
        currentTarget = target.parentNode;
      } else
        return;

      startPoint = getOrigin(currentTarget);
      currentTargetHeight = currentTarget.offsetHeight;

      addEvent(window, 'mousemove', hsvMove);
      hsvMove(e);
      startRender();
    },
    hsvMove = function(e) { // mouseMove callback
      var r = currentTargetHeight / 2,
        x = e.pageX - startPoint.left - r,
        y = e.pageY - startPoint.top - r,
        h = 360 - ((Math.atan2(y, x) * 180 / PI) + (y < 0 ? 360 : 0)),
        s = (Math.sqrt((x * x) + (y * y)) / r) * 100;
      myColor.setColor({
        h: h,
        s: s
      }, 'hsv');
    },
    renderHSVPicker = function(color) { // used in renderCallback of 'new ColorPicker'
      var x = Math.cos(PI2 - color.hsv.h * PI2),
        y = Math.sin(PI2 - color.hsv.h * PI2),
        r = color.hsv.s * colorDiscRadius;

      // Position the Cursor
      colorDiskCursor.style.left = (x * r + colorDiscRadius) + 'px';
      colorDiskCursor.style.top = (y * r + colorDiscRadius) + 'px';
    };

  addEvent(colorDiskWrapper, 'mousedown', hsvDown); // event delegation
  addEvent(window, 'mouseup', function() {
    removeEvent(window,...