JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="grid">

</div>

SCSS

HTML,
BODY {
  height: 100%;
}

.grid {
  height: 100%;
  overflow: hidden;
}

.grid {
  
  DIV {
    width: 4%;
    background: white;
    float: left;
    transition: background .5s ease;
    
    &::after {
      width: 100%;
      content: '';
      display: block;
      padding-bottom: 100%;
    }
    
    &.active {
      animation: colorplay 10s linear;
      
      
    }
  }

}

@keyframes colorplay {
  0%{
    background: white;
  }
  0%, 10%{
    background: cyan;
  }
  10%, 20%{
    background: magenta;
  }
  20%, 30%{
    background: yellow;
  }
  30%, 40%{
    background: black;
  }
  40%, 50%{
    background: red;
  }
  50%, 60%{
    background: green;
  }
  60%, 70%{
    background: blue;
  }
  70%, 80%{
    background: white;
  }
  80%, 90%{
    background: black;
  }
  90%, 100%{
    background: white;
  }
  
}

JavaScript

function create_circles() {
  
  let html = [];
  
  for (i = 0; i < 1000; i++) {
  	html.push('<div></div>');
  }
  
  $('.grid').html(html.join(''));

}

create_circles();

$(window).on('resize', create_circles );

$(document).on('mouseenter', '.grid > div', function() {

  $(this).addClass('active');

});