JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="https://raw.github.com/gruppler/CSS3-Colorpicker/master/colorpicker.js"></script>
<ul>
    <li>色01: <div id="color1" data-color="911"></div></li>
    <li>色02: <div id="color2"></div></li>
    <li>色03: <input id="color3" value="#80A000"/></li>
    <li>色04: <input type="text" id="color4"/></li>
    <li><output/></li>
</ul>

CSS

.color {
    display: inline-block;
    vertical-align: middle;
    width: 3em;
    height: 1.5em;
    margin: 0.1em;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 5px rgba(0,0,0,0.75);
    -o-box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 5px rgba(0,0,0,0.75);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7), inset 0 1px 5px rgba(0,0,0,0.75);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
input.color {
    width: 4em;
    border: 0 none;
    padding: 0.2em;
    -webkit-text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -o-text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.color.selected {
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.75);
    -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.75);
}
.color.error {
    -webkit-box-shadow: 0 0 3px 3px #d00;
    -moz-box-shadow: 0 0 3px 3px #d00;
    -o-box-shadow: 0 0 3px 3px #d00;
    box-shadow: 0 0 3px 3px #d00;
}

#css3colorpicker-div {
    z-index: 1000;
    display: block;
    padding: 10px;
    position: absolute;
    -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.75);
    -o-box-shadow: 0 2px 15px rgba(0,0,0,0.75);
    box-shadow: 0 2px 15px rgba(0,0,0,0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
}
#css3colorpicker-div.visible {
    transition: top .2s ease-in-out, left .2s ease-in-out;
    -moz-transition: top .2s ease-in-out, left .2s ease-in-out;
    -webkit-transition: top .2s...

JavaScript

$(function(){
    $.colorpicker.setDefaults({
        onSelect: function(color, input){
            $("output").val(input.id+": "+color);
        },
        onAddSwatch: function(color, swatches){
            document.cookie = 'swatches='+swatches.join(',');
        },
    }).addSwatch(cookie('swatches').split(','));

    $('#color1').colorpicker({
        realtime: false,
        invertControls: false,
        controlStyle: 'raised'
    });
    $('#color2').colorpicker({
        color: 'efa110',
        invertControls: false,
        controlStyle: 'inset',
        swatches: false
    });
    $('#color3').colorpicker({
        realtime: false,
        swatches: false
    });
    $('#color4').colorpicker({
        color: '#15a',
        controlStyle: 'simple inset',
    });
});

function cookie(name){
    var ca = document.cookie.split(/;\s*/);
    for(var i = 0; i < ca.length; i++){
        if(ca[i].indexOf(name + '=') == 0){
            return ca[i].substring(name.length + 1, ca[i].length);
        }
    }
    return '';
}