JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<h2>Primary</h2>
<div class="colors blue">
  <div class="oneHundred">
    <h3>Blue</h3>
    <strong>Pantone</strong> 7461 C<br />
    <strong>RGB</strong> 0,125,185<br />
    <strong>HTML</strong> #007db9<br />
    <strong>CMYK</strong> 98-24-1-3
  </div>
  <div class="twelve">
    <h3>Blue 75</h3>
    <strong>RGB</strong> 14,148,255<br />
    <strong>HTML</strong> #0E94FF
  </div>
  <div class="twentyfive">
    <h3>Blue 50</h3>
    <strong>RGB</strong> 83,199,255<br />
    <strong>HTML</strong> #53c7ff
  </div>
  <div class="thirtyseven">
    <h3>Blue 25</h3>
    <strong>RGB</strong> 211,241,255<br />
    <strong>HTML</strong> #d3f1ff
  </div>
</div>
<div class="colors grey">
  <div class="oneHundred">
    <h3>Dark80</h3>
    <strong>Pantone</strong> <br />
    <strong>RGB</strong> 91,103,112<br />
    <strong>HTML</strong> #5B6770<br />
    <strong>CMYK</strong>
  </div>
  <div class="seventyfive">
    <h3>Dark 60</h3>
    <strong>Pantone</strong> <br />
    <strong>RGB</strong> 174,185,191<br />
    <strong>HTML</strong> #AEB9BF<br />
    <strong>CMYK</strong>
  </div>
  <div class="fifty">
    <h3>Dark 40</h3>
    <strong>Pantone</strong> <br />
    <strong>RGB</strong> 216,224,230<br />
    <strong>HTML</strong> #D8E0E6<br />
    <strong>CMYK</strong>
  </div>
  <div class="twentyfive">
    <h3>Dark 20</h3>
    <strong>Pantone</strong> <br />
    <strong>RGB</strong> 242,246,248<br />
    <strong>HTML</strong> #f2f6f8<br />
    <strong>CMYK</strong>
  </div>
</div>
<div class="colors text">
  <div class="uiText" style="display: none;">
    <h3>UIDark</h3>
    <strong>RGB</strong> 21,43,53<br />
    <strong>HTML</strong> #152935<br />
  </div>
  <div class="darkText">
    <h3>UIDark</h3>
    <strong>Pantone</strong> 7546 C<br />
    <strong>RGB</strong> 37,55,70<br />
    <strong>HTML</strong> #253746<br />
    <strong>CMYK</strong> 73-45-24-66
  </div>
  <div class="lightText">
    <h3>UIWhite</h3>
    <strong>RGB</strong> 255,255,255<br />
   ...

SCSS

$brandBlue: #007db9;
$brandViolet: #654EA3;
$brandGreen: #40813B;
$brandYellow: #F2A900;
$brandRed: #DA291C;
$lightText: #fff;
$UIText: #152935;
$darkText: #263A4A;
$darkGrey: #5B6770;
$darkGrey75: #AEB9BF;
$darkGrey50: #D8E0E6;
$darkGrey25: #f2f6f8;
$brandTeal: #4B7E86;
$brandPurple: #93328E;
$brandOrange: #CF4520;
$brandOlive: #667F39;
$brandPink: #E21B79;
$brandBrown: #9e6b38;

//$brandNewRed: #c8102d;
//$brandHoney: #D6A461;
//$brandOrange: #CF4B04;

.colors {
  display: flex;
  justify-content: space-evenly;
  &>* {
    width: 100%;
    text-align: left;
    padding: 20px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
  }
  
  h3 {
    margin-top: 0;
    text-transform: none;
  }
  
    .oneHundred,
    .darkText,
    .uiText {
      color: $lightText;
    }
    .twelve,
    .twentyfive,
    .seventyfive,
    .fifty,
    .lightText {
      color: $darkText;
    }
    
    .twelve {
      display: none;
    }
  
  &.blue {
    .oneHundred {
      background-color: $brandBlue;
    }
    .twelve {
      background-color: lighten($brandBlue, 12.5%);
    }
    .twentyfive {
      background-color: lighten($brandBlue, 30%);
    }
    .thirtyseven {
      background-color: lighten($brandBlue, 55%);
    }
  }
  &.violet {
    .oneHundred {
      background-color: $brandViolet;
    }
    .twelve {
      background-color: lighten($brandViolet, 12.5%);
    }
    .twentyfive {
      background-color: lighten($brandViolet, 25%);
    }
    .thirtyseven {
      background-color: lighten($brandViolet, 44%);
    }
  }
  &.teal {
    .oneHundred {
      background-color: $brandTeal;
    }
    .twelve {
      background-color: lighten($brandTeal, 12.5%);
    }
    .twentyfive {
      background-color: lighten($brandTeal, 27%);
    }
    .thirtyseven {
      background-color: lighten($brandTeal, 47%);
    }
  }
  /* &.orange {
    .oneHundred {
      background-color: $brandOrange;
    }
    .twelve {
      background-color:...