JSFiddle - React, Tailwind, and code Playground

by T1MOXA

HTML

<section class="demo">

        <div class="center">
            <div class="color-picker"></div>

        </div>

    </section>

CSS

.pickr {
    position: relative;
    overflow: visible
}

.pickr * {
    box-sizing: border-box
}

.pickr .pcr-button {
    position: relative;
    height: 2em;
    width: 2em;
    padding: .5em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    border-radius: .15em;
    cursor: pointer;
    background: transparent;
    transition: background-color .3s;
    font-family: Source Sans Pro
}

.pickr .pcr-button:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius: .15em;
    z-index: -1
}

.pickr .pcr-app {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 15em;
    width: 28em;
    max-width: 95vw;
    padding: .8em;
    border-radius: .1em;
    background: #fff;
    box-shadow: 0 .2em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.02);
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    font-family: Source Sans Pro
}

.pickr .pcr-app.visible {
    visibility: visible;
    opacity: 1
}

.pickr .pcr-app .pcr-output {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.3em
}

.pickr .pcr-app .pcr-output input {
    padding: .5em;
    border: none;
    outline: none;
    letter-spacing: .07em;
    font-size: .75em;
    width: 4em;
    text-align: center;
    cursor: pointer;
    color: #c4c4c4;
    background: #f8f8f8;
    border-radius: .15em;
    margin: 0 .2em;
    transition: all .15s
}

.pickr .pcr-app .pcr-output input:hover {
    color: gray
}

.pickr .pcr-app .pcr-output .pcr-result {
    color: gray;
    text-align: left;
    flex-grow: 1;
    min-width: 1em;
    margin-right: .5em;
    transition: all .2s;
    border-radius: .15em;
    background: #f8f8f8;
  ...

JavaScript

/*

(c) https://github.com/Simonwep/pickr

*/

! function(t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.Pickr = e() : t.Pickr = e()
}(window, function() {
    return function(t) {
        var e = {};

        function o(r) {
            if (e[r]) return e[r].exports;
            var n = e[r] = {
                i: r,
                l: !1,
                exports: {}
            };
            return t[r].call(n.exports, n, n.exports, o), n.l = !0, n.exports
        }
        return o.m = t, o.c = e, o.d = function(t, e, r) {
            o.o(t, e) || Object.defineProperty(t, e, {
                enumerable: !0,
                get: r
            })
        }, o.r = function(t) {
            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
                value: "Module"
            }), Object.defineProperty(t, "__esModule", {
                value: !0
            })
        }, o.t = function(t, e) {
            if (1 & e && (t = o(t)), 8 & e) return t;
            if (4 & e && "object" == typeof t && t && t.__esModule) return t;
            var r = Object.create(null);
            if (o.r(r), Object.defineProperty(r, "default", {
                enumerable: !0,
                value: t
            }), 2 & e && "string" != typeof t) for (var n in t) o.d(r, n, function(e) {
                return t[e]
            }.bind(null, n));
            return r
        }, o.n = function(t) {
            var e = t && t.__esModule ? function() {
                    return t.
                    default
                } : function() {
                    return t
                };
            return o.d(e, "a", e), e
        }, o.o = function(t, e) {
            return Object.prototype.hasOwnProperty.call(t, e)
        }, o.p = "dist/", o(o.s = 8)
    }([function(t, e, o) {
       ...