JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div>backgrounds: accounts | theme colors</div>
<div class="container">
  <div class="box background-color" data-color="account0--bg"></div>
  <div class="box background-color" data-color="account1--bg"></div>
  <div class="box background-color" data-color="account2--bg"></div>
  <div class="box background-color" data-color="account3--bg"></div>
  <div class="box background-color" data-color="account4--bg"></div>
  <div class="box background-color" data-color="account5--bg"></div>
  <div class="box background-color" data-color="account6--bg"></div>
  <div class="box background-color" data-color="account7--bg"></div>
  <div class="sep"></div>
  <div class="box background-color" data-color="primary--bg"></div>
  <div class="box background-color" data-color="secondary--bg"></div>
</div>

<div>borders: accounts | theme colors</div>
<div class="container">
  <div class="box border-color" data-color="account0--border"></div>
  <div class="box border-color" data-color="account1--border"></div>
  <div class="box border-color" data-color="account2--border"></div>
  <div class="box border-color" data-color="account3--border"></div>
  <div class="box border-color" data-color="account4--border"></div>
  <div class="box border-color" data-color="account5--border"></div>
  <div class="box border-color" data-color="account6--border"></div>
  <div class="box border-color" data-color="account7--border"></div>
  <div class="sep"></div>
  <div class="box border-color" data-color="primary--border"></div>
  <div class="box border-color" data-color="secondary--border"></div>
</div>

<div>font color: accounts | theme colors</div>
<div class="container">
  <div class="box font-color" data-color="account0--color">0</div>
  <div class="box font-color" data-color="account1--color">1</div>
  <div class="box font-color" data-color="account2--color">2</div>
  <div class="box font-color" data-color="account3--color">3</div>
  <div class="box font-color" data-color="account4--color">4</div>
 ...

SCSS

$account-bar-0: #0798D1 !default;
$account-bar-1: #6F9C2F !default;
$account-bar-2: #D96D01 !default;
$account-bar-3: #FFC703 !default;
$account-bar-4: #364495 !default;
$account-bar-5: #49AFA6 !default;
$account-bar-6: #A02886 !default;
$account-bar-7: #673300 !default;

$account-list: ($account-bar-0 $account-bar-1 $account-bar-2 $account-bar-3 $account-bar-4 $account-bar-5 $account-bar-6 $account-bar-7);

$primary-color: rebeccapurple;
$secondary-color: green;

// backgrounds
@each $account in $account-list {
  $i: index($account-list, $account) - 1;
  [data-color*="account#{$i}--bg"] {
    background-color: $account !important;
  }
}
[data-color*="primary--bg"] {
  background-color: $primary-color !important;
}
[data-color*="secondary--bg"] {
  background-color: $secondary-color !important;
}

// borders
@each $account in $account-list {
  $i: index($account-list, $account) - 1;
  [data-color*="account#{$i}--border"] {
    border-color: $account !important;
  }
}
[data-color*="primary--border"] {
  border-color: $primary-color !important;
}
[data-color*="secondary--border"] {
  border-color: $secondary-color !important;
}

// font color
@each $account in $account-list {
  $i: index($account-list, $account) - 1;
  [data-color*="account#{$i}--color"] {
    color: $account !important;
  }
}
[data-color*="primary--color"] {
  color: $primary-color !important;
}
[data-color*="secondary--color"] {
  color: $secondary-color !important;
}

// gradient vertical
@each $account in $account-list {
  $i: index($account-list, $account) - 1;
  [data-color*="account#{$i}--gradientV"] {
    background: linear-gradient(to bottom, lighten($account, 5) 0%, darken($account, 5) 100%);
  }
}
[data-color*="primary--gradientV"] {
  background: linear-gradient(to bottom, lighten($primary-color, 5) 0%, darken($primary-color, 5) 100%);
}
[data-color*="secondary--gradientV"] {
  background: linear-gradient(to bottom, lighten($secondary-color, 5) 0%, darken($secondary-color, 5)...