JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<main data-toggle="on">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div...

SCSS

MAIN {
  overflow: hidden;
}

.box {
  width: 10%;
  //transition: background 1s ease;
  float: left;
  background: #fff;

  &.active {
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  &:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%;
  }
}

@keyframes example2 {
  0% {
    background: #fff;
  }
  50% {
    background: #000;
  }
  100% {
    background: #fff;
  }
}



@keyframes example {
  #{((100/7)*0)}% {
    background: #ff0000;
  }
  #{((100/7)*1)}% {
    background: #ff6e00;
  }
  #{((100/7)*2)}% {
    background: #ffff00;
  }
  #{((100/7)*3)}% {
    background: #1eb41e;
  }
  #{((100/7)*4)}% {
    background: #00d2ff;
  }
  #{((100/7)*5)}% {
    background: #3737c8;
  }
  #{((100/7)*6)}% {
    background: #d200ff;
  }
  #{((100/7)*7)}% {
    background: #ff0000;
  }
}

JavaScript

$(document).ready(function() {

  $("HTML").on("click", function() {

    let toggle = $('MAIN').attr('data-toggle');

    if (toggle === 'on') {

      $('MAIN').attr('data-toggle', 'off');
      $('.box').removeClass('active');

    } else {

      $('MAIN').attr('data-toggle', 'on');
      run();

    }

  });

  let boxes = [];

  $('.box').each(function(index, value) {
    $(this).addClass('box-' + index);
    boxes[index] = '.box-' + index;
  });

  function run() {

    boxes.sort(function(a, b) {
      return 0.5 - Math.random()
    });

    $.each(boxes, function(index, value) {
      setTimeout(function() {
        $(value).addClass('active');
      }, 100 * index);
    });

  }

  run();

});