JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<h1> Pastel Colors <small>Generator</small> </h1>

<div class="samples-container"></div>

CSS

body {
    background-color: #fefefe;
    text-align: center;
}

h1 {
    font-family: 'Myiriad Pro', 'Helvetica';
    font-weight: 300;
    color: #676767;
}

h1 small {
    color: #ccc;
}

.sample-card {
    background-color: #eee;
    width: 50px;
    height: 50px;
    float: left;
    overflow: hidden;
    margin: 0 10px 10px 0;
    box-shadow: 2px 2px 0 rgba(60, 60, 60, .1); 
}

.sample-hex {
    background-color: rgba(40, 40, 40, .3);
    font-size: 10px;
    color: #fefefe;
    line-height: 50px;
    border-radius: 4px;
    padding: 4px 2px;
    display: none;
}

JavaScript

var id = 0;

for ($i = 0; $i < 196; $i++) {
    id++;
       
    $('<div />', {
        'id': 'sample-color-' + id,
        'class': 'sample-card'
    }).appendTo('.samples-container');
    
    $('<span class="sample-hex" />').appendTo($('#sample-color-' + id));
    
    pastelColors($('#sample-color-' + id));
}

function pastelColors (id) {
    var r = (Math.round(Math.random()* 127) + 127).toString(16),
        g = (Math.round(Math.random()* 127) + 127).toString(16),
        b = (Math.round(Math.random()* 127) + 127).toString(16),
        color = '#' + r + g + b;
    
   id.css('backgroundColor', color);
   id.children('.sample-hex').text(color.toUpperCase());
}

$('.sample-card').hover(function () {
    $(this).children('.sample-hex').stop().fadeIn(210);
}, function () {
    $(this).children('.sample-hex').stop().fadeOut(120);    
});