JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="box box-1"></div>
<div class="box box-1 mod"></div>

<div class="box box-2"></div>
<div class="box box-2 mod"></div>

<div class="box box-3"></div>
<div class="box box-3 mod"></div>

<div class="box box-4"></div>
<div class="box box-4 mod"></div>

<div class="box box-5"></div>
<div class="box box-5 mod"></div>

<div class="box box-6"></div>
<div class="box box-6 mod"></div>

<div class="box box-7"></div>
<div class="box box-7 mod"></div>

SCSS

body{
  background-color: #fff;
}

.box{
  width: 100px;
  height: 100px;
  margin: 10px;
  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.25);
  transition: background-color 300ms;
}

$c-1: #fff;
$c-2: #f3f3f3;
$c-3: #939ca2;
$c-4: #171e22;
$c-5: #374750;
$c-6: #d51117;
$c-7: #6ea8c9;

$colors: $c-1 $c-2 $c-3 $c-4 $c-5 $c-6 $c-7;

$modifier: 20%;

@each $c in $colors{
  $i: index($colors, $c);
  .box-#{$i}{
    background-color: $c;
    float: left;
    &:hover,
    &.mod{
      background-color: scale-color($c, $lightness: $modifier);
    }
    &:nth-child(2n+1){
      clear: left;
    }
  }
}