JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://acko.net/files/farbtastic/demo/farbtastic.js"></script>
<div id="colorpicker"></div>
<input type="text" id="colorText" value="#123456" />
<div id="colorDiv">div
    <div>

CSS

.farbtastic {
    position: relative;
}
.farbtastic * {
    position: absolute;
    cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
    width: 195px;
    height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
    top: 47px;
    left: 47px;
    width: 101px;
    height: 101px;
}
.farbtastic .wheel {
    width: 195px;
    height: 195px;
}
.farbtastic .overlay {
}
.farbtastic .marker {
    width: 17px;
    height: 17px;
    margin: -8px 0 0 -8px;
    overflow: hidden;
}

JavaScript

//var domNodes = $('#colorDiv, #colorText');

//$('#colorpicker').farbtastic(domNodes);

$.farbtastic(colorpicker).linkTo(callBack);

function callBack(color1,color2) {
		color1 = rgb(0,0,0);
    color2 = rgb(255,255,255);
    
    $('#colorText').css('color', color1);
    $('#colorText').css('background-color','rgb(255,255,255)');
    
}