JSFiddle - React, Tailwind, and code Playground

by bfelda

HTML

<script src="http://acko.net/files/farbtastic/demo/farbtastic.js"></script>
<div id="colorpicker"></div>
    <input type="text" id="colorText" name="colorText" value="#123456" />
    <div id='colorBackground'></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

$('#colorpicker').farbtastic(changeColor);

var changeColor = function(color){
 console.log(color);   
}