JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<script src="http://www.eyecon.ro/colorpicker/js/colorpicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/colorpicker/css/colorpicker.css">
<div id='image'></div>
<span class='color' style='background-color: #fe4'></span>

CSS

#image {
    background: url(http://www.chismbrothers.com/images/woodfloors.png);
    height: 341px;
    width: 515px;
}

.color {
    width: 50px;
    height: 50px;
    displaye: block;
    float: left;
    margin: 5px 0px;
}

JavaScript

$('.color').ColorPicker({
    color: '#ffffff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('.color').css('backgroundColor', '#' + hex);
        $('#image').css('backgroundColor', '#' + hex);
    }
});