JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/bgrins/spectrum/master/spectrum.js"></script>


<div id='preview'></div>
<div id='slider'>
    <div class='swatch' style='left: 20%;'></div>
    <div class='swatch' style='left: 50%;'></div>
</div>

CSS

#preview {
 height: 20px;
width: 200px;    
border: solid 1px;
    background: red;
}
#slider {
 height: 10px;
border: solid 1px;
 width: 200px;
position:relative;    
}

.swatch {
    position:absolute;
    bottom:0;
    height: 10px;
    width: 10px;
    background: red;
}

/***
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;
}
.sp-container.sp-flat {
    position: relative;
}

/* 
   Keep square proportions using percentage widths.
   Basic aspect ratio technique modified from:
   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:83%;
    height: 100%; /* IE7 needs this for hue slider to take up full space */
}
.sp-fill { 
    *height: 80%;
    margin-top: 80%;  /* Same as sp-color width */
}
.sp-sat, .sp-val { 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

/* Don't allow text selection */
.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; 
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    border-radius: 5px;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    zoom: 1;
    *display: inline;
}
.sp-dd { 
    padding: 2px 0;
    height: 16px; 
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    width:25px;
    height: 20px;
    border: solid 1px #ddd;
    margin-right: 5px;
   ...

JavaScript

$(function() {
    
   $(".swatch")
});