JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://projektstrony.net.pl/colorpicker/js/colorpicker.js"></script>
<link rel="stylesheet" href="http://projektstrony.net.pl/colorpicker/css/colorpicker.css">
<div id="colorSelector"><div style="background-color: rgb(44, 44, 133);"></div></div>
<div id="colorSelectorBody"><div style="background-color: rgb(250, 52, 52);"></div></div>
<table colspan="1" rowspan="1" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p id="akapit">jakiĹ› akapit</p>
CSS
#colorSelector {
margin:10px 0px 10px 10px;
}
#colorSelectorBody {
margin:10px 0px 150px 10px;
}
#colorSelector, #colorSelector div, #colorSelectorBody, #colorSelectorBody div {
width:40px;
height:40px;
}
table tr td {
padding:20px;
}
JavaScript
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
$('table tr td:first').css('backgroundColor', '#' + hex);
$('#akapit').css('color', '#' + hex);
}
});
$('#colorSelectorBody').ColorPicker({
color: '#e63434',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('body').css('backgroundColor', '#' + hex);
}
});