JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="list"></div>

CSS

.list{
  border-radius: 10px;
  overflow: hidden;
}
.item{
  display: block;
  float: left;
  width: 33.333%;
  padding: 15px 20px;
  line-height: 30px;
  font-weight: 900;
  font-family: sans-serif;
  box-sizing: border-box;
}

JavaScript

function toRange(value, min, max){
    return Math.max(min, Math.min(max, value));
  }

function hexToHSL(H, lighten) {
    var ln;

    if(typeof lighten === 'number'){
      toRange(lighten, 0, 100).toFixed(1);
    }

    // Convert hex to RGB first
    let r = 0, g = 0, b = 0;
    if (H.length == 4) {
      r = "0x" + H[1] + H[1];
      g = "0x" + H[2] + H[2];
      b = "0x" + H[3] + H[3];
    } else if (H.length == 7) {
      r = "0x" + H[1] + H[2];
      g = "0x" + H[3] + H[4];
      b = "0x" + H[5] + H[6];
    }
    // Then to HSL
    r /= 255;
    g /= 255;
    b /= 255;
    let cmin = Math.min(r,g,b),
        cmax = Math.max(r,g,b),
        delta = cmax - cmin,
        h = 0,
        s = 0,
        l = 0;

    if (delta == 0)
      h = 0;
    else if (cmax == r)
      h = ((g - b) / delta) % 6;
    else if (cmax == g)
      h = (b - r) / delta + 2;
    else
      h = (r - g) / delta + 4;

    h = Math.round(h * 60);

    if (h < 0)
      h += 360;

    l = (cmax + cmin) / 2;
    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
    s = +(s * 100).toFixed(1);
    l = +(l*100).toFixed(1);
    
    
    if(typeof lighten === 'function'){
      ln = lighten(l);
    }

    if(ln){
      l = ln;
    }

    return "hsl(" + h + "," + s + "%," + l + "%)";
  }
  
//Function to change page color & text

function isLightColor(color) {
    // Credits goes to: https://awik.io/determine-color-bright-dark-using-javascript/
    // Variables for red, green, blue values
    var r, g, b, hsp;
    
    // Check the format of the color, HEX or RGB?
    if (color.match(/^rgb/)) {

        // If HEX --> store the red, green, blue values in separate variables
        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
        
        r = color[1];
        g = color[2];
        b = color[3];
    } else {
        // If RGB --> Convert it to HEX: http://gist.github.com/983661
        color = +("0x" + color.slice(1).replace( 
        color.length...