JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.7.0/spectrum.min.js"></script>
<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
<header class="head"></header>
<div class="content">
    <input type="text" id="colorp"></input>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.head {
    width:100%;
    height:100px;
    background-color:cyan;
}
.content {
    position:absolute;
    top:100px;
    bottom:0;
    left:0;
    right:0;
    background-color:blue;
}
#colorp
{
    position:absolute;
    bottom:5px;
    right:10px;
    
}

JavaScript

$(document).ready(function () {

    $("#colorp").spectrum({
        flat: true,
        showAlpha:true,
        showInput: true,
        allowEmpty: true,
        move : function(color)
        {
            $(".content").css('background-color', color.toHexString());
        }
        
    });
    
   $("#colorp").on('move.spectrum',function(tinycolor){
       alert(tinycolor.toHexString());
    });

});