JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<div class="delay-animation fade-in" data-color-picker></div>

CSS

@-webkit-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


body {
    background: rgb(210, 247, 178);
    margin: 0;
    padding: 4em;
    position: relative;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    transition: .6s;
}

body,
[data-color-picker] li {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

.fade-in {
    -webkit-animation: fade-in 1s ease-in both;
    -moz-animation: fade-in 1s ease-in both;
    -o-animation: fade-in 1s ease-in both;
    animation: fade-in 1s ease-in both;
}

.delay-animation {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-delay: .5s;
} 


[data-color-picker] {
    background: #333;
    bottom: 0;
    box-shadow: 0 0 1.3em rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: block;
    height: 16em;
    margin: 0 -8em -14em 0;
    opacity: 0;
    position: absolute;
    right: 50%;
    width: 16em;
}

[data-color-picker] ul {
    border: none;
    font-size: 0;
    margin: 0;
    padding: 0;
}

[data-color-picker] li {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 4em;
    margin: 0;
    padding: 0;
    position: relative;
    width: 4em;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    z-index: 1;
}

[data-color-picker] li:hover {
    -webkit-transform: scale(1.4) translate(1em);
    -moz-transform: scale(1.4) translate(1em);
    transform: scale(1.4) translate(1em);
    z-index: 2;
}

/*
[data-color-picker] li:active ~ li {
    opacity: 0.2;
}
*/

[data-color-picker] li:hover:before {
    /*
    -webkit-animation: fade-in .5s ease-in both;
    -moz-animation: fade-in .5s ease-in...

JavaScript

/*

    ColorPicker

*/


'use strict';


var ColorPicker = (function() {
    var $document = document,
        $body = $document.body;
    
    function generatePicker(el) {
        var $el = el,
            $colorPickerWrap = $document.createElement('ul');
        
        var addItem = function(index) {
            var baseColor = '#000000',
                randomHex = baseColor.replace(/0/g, function() {
                    return (~~(Math.random()*16)).toString(16);
                });
            
            var $colorPickerItem = $document.createElement('li');
                        
            $colorPickerItem.classList.add('js-color-picker-i-' + index);
            $colorPickerItem.setAttribute('data-color', randomHex);
            $colorPickerItem.setAttribute('title', randomHex);
            $colorPickerItem.style.backgroundColor = randomHex;
            
            $colorPickerItem.addEventListener('click', function() {
                var dataColor = this.getAttribute('data-color');
                $body.style.backgroundColor = dataColor;
            }, false);

            $colorPickerWrap.appendChild($colorPickerItem);
        };
        
        var addSet = function() {
            for (var i = 0; i <= 15; i++) {
                addItem(i);
            }
            
            $el.appendChild($colorPickerWrap);
        };
        
        addSet();
    };
    
    function init(el) {
        console.log('init', el);
        generatePicker(el);
    };
    
    return {
        init: init
    }
}());


// find parent element
var $colorPickerEl = document.querySelector('[data-color-picker]');

// attach ColorPicker element
ColorPicker.init($colorPickerEl);