JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>


<div class="el bg-red-darkest"></div>
<div class="el bg-red-darker"></div>
<div class="el bg-red-dark"></div>
<div class="el bg-red"></div>
<div class="el bg-red-light"></div>
<div class="el bg-red-lighter"></div>
<div class="el bg-red-lightest"></div>
<div class="el bg-red-bright"></div>


<br>

<div class="el bg-green-darkest"></div>
<div class="el bg-green-darker"></div>
<div class="el bg-green-dark"></div>
<div class="el bg-green"></div>
<div class="el bg-green-light"></div>
<div class="el bg-green-lighter"></div>
<div class="el bg-green-lightest"></div>
<div class="el bg-green-bright"></div>

<br>

<div class="el bg-blue-darkest"></div>
<div class="el bg-blue-darker"></div>
<div class="el bg-blue-dark"></div>
<div class="el bg-blue"></div>
<div class="el bg-blue-light"></div>
<div class="el bg-blue-lighter"></div>
<div class="el bg-blue-lightest"></div>
<div class="el bg-blue-bright"></div>

<br>

<div class="el bg-yellow-darkest"></div>
<div class="el bg-yellow-darker"></div>
<div class="el bg-yellow-dark"></div>
<div class="el bg-yellow"></div>
<div class="el bg-yellow-light"></div>
<div class="el bg-yellow-lighter"></div>
<div class="el bg-yellow-lightest"></div>
<div class="el bg-yellow-bright"></div>

<br>

<div class="el bg-cyan-darkest"></div>
<div class="el bg-cyan-darker"></div>
<div class="el bg-cyan-dark"></div>
<div class="el bg-cyan"></div>
<div class="el bg-cyan-light"></div>
<div class="el bg-cyan-lighter"></div>
<div class="el bg-cyan-lightest"></div>
<div class="el bg-cyan-bright"></div>

<br>

<div class="el bg-magenta-darkest"></div>
<div class="el bg-magenta-darker"></div>
<div class="el bg-magenta-dark"></div>
<div class="el bg-magenta"></div>
<div class="el bg-magenta-light"></div>
<div class="el bg-magenta-lighter"></div>
<div class="el bg-magenta-lightest"></div>
<div class="el bg-magenta-bright"></div>

<br>

<div class="el bg-orange-darkest"></div>
<div class="el...

SCSS

@function color($c, $op: 1) {
  
  @if map-has-key($colors, $c) {
    $color: map-get($colors, $c);
    @return rgba($color, $op);
  }
  
  @return transparent;
}

@function getShade($color, $n, $s) {
  
  @if $n > 0 {
    @return saturate(lighten($color, $n * 10%), $s * 10%);
  } @else {
    @return saturate(darken($color, ($n - $n * 2) * 10%), $s * 10%);
  }
  
}

$colors: ();

$color_settings: (
  red: (
    base: #dc3243,
    shades: (
      lightest: (
        amount: 4,
        saturation: 3.5
      ),
      lighter: (
        amount: 3,
        saturation: 2.5
      ),
      light: (
        amount: 1.5,
        saturation: 2
      ),
      dark: (
        amount: -1,
        saturation: 0.5
      ),
      darker: (
        amount: -2.5,
        saturation: 1.5
      ),
      darkest: (
        amount: -3.5,
        saturation: 3
      ),
      bright: (
        amount: 0.5,
        saturation: 2.5
      )
    )
  ),
  green: (
    base: #2e854f,
    shades: (
      lightest: (
        amount: 5.5,
        saturation: 3
      ),
      lighter: (
        amount: 4.5,
        saturation: 2
      ),
      light: (
        amount: 3.5,
        saturation: 0.5
      ),
      dark: (
        amount: -1,
        saturation: 1.5
      ),
      darker: (
        amount: -2,
        saturation: 2.5
      ),
      darkest: (
        amount: -2.5,
        saturation: 3
      ),
      bright: (
        amount: 0,
        saturation: 5
      )
    )
  ),
  blue: (
    base: #4579ac,
    shades: (
      lightest: (
        amount: 4.5,
        saturation: 3
      ),
      lighter: (
        amount: 3,
        saturation: 1.5
      ),
      light: (
        amount: 1.5,
        saturation: 0.5
      ),
      dark: (
        amount: -1.5,
        saturation: 1
      ),
      darker: (
        amount: -2.5,
        saturation: 1.5
      ),
      darkest: (
        amount: -3.5,
        saturation: 2
      ),
      bright: (
        amount: 0.5,
        saturation: 6
     ...