JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

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

<div id='grad-outer'>
<div id='grad-inner'>
<div id='grad'></div>
    <div class='stop' id='s-0'><input type='spectrum' /></div>
    <div class='stop' id='s-20'><input type='spectrum' /></div>
    <div class='stop' id='s-40'><input type='spectrum' /></div>
    <div class='stop' id='s-60'><input type='spectrum' /></div>
    <div class='stop' id='s-80'><input type='spectrum' /></div>
    <div class='stop' id='s-100'><input type='spectrum' /></div>
</div>
</div>

CSS

#grad-outer {  padding:10px; border-radius: 5px; background: #999; display:inline-block; }
#grad-inner{ position:relative; width: 280px; }
.sp-replacer { position:absolute; top: -50%; left:30px; width: 200px;}
.sp-replacer input { width: 145px; float:left; }
.sp-replacer .sp-dd { float:right; }

.stop { position:absolute; left: 30px; line-height: 10px; font-size: 10px; margin-top:-10px; height:11px; vertical-align:top; }
.stop:before { content:"_____"; }
#s-0 { top:0; }
#s-20 { top:20%; }
#s-40 { top:40%; }
#s-60 { top:60%; }
#s-80 { top:80%; }
#s-100 { top:100%; }
#grad { width: 30px; height: 300px; }

/***
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 {
    display:inline-block;
    margin:0;
   ...

JavaScript

function makegradient() {
    var start = "top left";
    var stop = "";
    var stops = [
        {
            color: 'white',
            offset: '0' 
        },
        {
            color: 'white',
            offset: '0' 
        },
     
    ];
     return [
         "background: -webkit-linear-gradient(top, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black)"
      ];   
}

function redrawCSS(styles, el) {
    styles.html(el + "{\n" + makegradient().join('\n') + "\n} ");
}


$(function() {
    redrawCSS($("#custom"), "#grad");
    
    $(".sp-preview").after("<input />");
    $("#s-80 input").bind("click mousedown", function(e) {
         e.stopPropagation();   
    });
    
    $(".stop").draggable({
        axis: 'y',
        containment: 'parent'
    });
});