JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-4">
    in HSV format:
    <br>
    <div style="position: relative;">
        <input type="text" id="color-hsv">
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('#color-hsv').wheelColorPicker({
            format: 'hsv'
        });
    });

</script>

CSS

/**
 * jQuery Wheel Color Picker
 * Base Stylesheet
 * 
 * http://www.jar2.net/projects/jquery-wheelcolorpicker
 * 
 * Copyright © 2011 Fajar Chandra. All rights reserved.
 * Released under MIT License.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Note: Width, height, left, and top properties are handled by the 
 * plugin. Please do not change these values.
 */

.jQWCP-wWidget {
    position: absolute;
    width: 420px;
    height: 180px;
    background: #eee;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
    border-radius: 4px;
    border: solid 1px #aaa;
    padding: 10px;
    z-index: 1001;
}

.jQWCP-wWidget.jQWCP-block {
    position: relative;
    border-color: #aaa;
    box-shadow: inset 1px 1px 1px #ccc;
}

.jQWCP-wWheel {
    background: url('images/wheel.500.jpg') no-repeat center center;
    background-size: contain;
    position: relative;
    float: left;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: solid 1px #aaa;
    margin: -1px;
    transition: border .15s;
    cursor: crosshair;
}

.jQWCP-wWheel:hover {
    border-color: #666;
}

.jQWCP-wWheelOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    border-radius: 50%;
}

.jQWCP-wWheelCursor {
    background: url('images/crosshair.png') no-repeat center center;
    width: 19px;
    height: 19px;
    margin: -9px 0 0 -9px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.jQWCP-slider-wrapper,
.jQWCP-wPreview {
    position: relative;
    width: 20px;
    height: 180px;
    float: left;
    margin-left: 10px;
}

.jQWCP-slider,
.jQWCP-wPreviewBox {
    position: absolute;
    width: 20px;
    height: 180px;
    left: 0;
    top: 0;
    border: solid 1px #aaa;
    margin: -1px;
    border-radius: 4px;
    transition: border .15s;
}

.jQWCP-slider {
    cursor: crosshair;
}

.jQWCP-slider-wrapper:hover .jQWCP-slider {
    border-color: #666;
}

.jQWCP-scursor {
   ...

JavaScript

/**
 * jQuery Wheel Color Picker
 * 
 * http://www.jar2.net/projects/jquery-wheelcolorpicker
 * 
 * Author : Fajar Chandra
 * Date   : 2015.10.16
 * 
 * Copyright © 2011-2015 Fajar Chandra. All rights reserved.
 * Released under MIT License.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function($) {

    // Contains public methods
    var methods = {};

    // Contains private methods
    var private = {};

    // Holds the color picker popup widget for use globally
    var g_Popup = null;

    // Holds the overlay element wrapped in jQuery
    var g_Overlay = null;

    // Coordinate of the top left page (mobile chrome workaround)
    var g_Origin = {
        left: 0,
        top: 0
    };

    // Various workaround flags
    var BUG_RELATIVE_PAGE_ORIGIN = false; // top left of the page is not on (0,0), making window.scrollX/Y and offset() useless

    /**
     * Function: wheelColorPicker
     * 
     * The wheelColorPicker function wrapper. Firing all functions and 
     * setting/getting all options in this plugin should be called via 
     * this function.
     * 
     * This function will look for the options parameter passed in, and 
     * try to do something as specified in this order:
     * 1. If no argument is passed, then initialize the plugin
     * 2. If object is passed, then call setOptions()
     * 3. If string is passed, then try to fire a method with that name
     * 4. If string is passed and no method matches the name, then try 
     *    to set/get an option with that name
     */
    $.fn.wheelColorPicker = function() {
        // Initialize
        if (arguments.length == 0) {
            return methods.setOptions.call(this, {});
        }
        // Set options and initialize
        if (typeof arguments[0] === "object") {
            return methods.setOptions.call(this, arguments[0]);
        }
        // Call a method
        else if ($.isFunction(methods[arguments[0]])) {
            var shift = [].shift;
           ...