JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
 
<div id='dialog'>
<input id='picker' />
</div>

CSS

/***
Spectrum: The No Hassle Colorpicker
https://github.com/bgrins/spectrum

Author: Brian Grinstead
License: MIT
***/

.sp-container { 
    position:absolute; 
    top:0; 
    left:0; 
    display:inline-block;
    *display: inline;
    *zoom: 1;
    z-index: 2147483647;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative; 
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute; 
   top:0; 
   left:0; 
   bottom:0; 
   right:0;
}
.sp-color { 
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}
.sp-fill { 
    padding-top: 80%;
}
.sp-sat, .sp-val { 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider , .sp-container.sp-dragging .sp-input, .sp-container button  { 
    -webkit-user-select:none; 
    -moz-user-select: none; 
    -o-user-select:none; 
    user-select: none; 
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial { 
    display: none; 
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    -ms-filter:...

JavaScript

var dialog = $('#dialog').dialog({
    autoOpen: true,
    title: 'Basic Dialog',
    create: function(event, ui) {
        $('#picker').spectrum();
    },
    drag: function() {
        var picker = $("#picker");
        if (picker.spectrum("container").is(":visible")) {
            picker.spectrum("show");
        }
    }
});