JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="blocks">
  <div class="bl1"></div>
  <div class="bl2"></div>
  <div class="bl3"></div>
  <div class="bl4"></div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #1c2b3c;
}

$blocksWidth: 100px;
$blockItem: 45%;
$blockOffset: 55%;
.blocks {
  position: fixed;
  width: $blocksWidth;
  height: $blocksWidth;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  div {
    width: $blockItem;
    height: $blockItem;
    position: absolute;
    background: #fff;
    
  }
  /*block positions*/
  .bl1 {
    top: 0;
    left: 0;
  }
  .bl2 {
    top: 0;
    left: $blockOffset;
  }
  .bl3 {
    top: $blockOffset;
    left: 0;
  }
  .bl4 {
    top: $blockOffset;
    left: $blockOffset;
  }
  /*block backgrounds*/
  .bl1 {
    background: #f1f1f1
  }
  .bl2 {
    background: #e1e1e1
  }
  .bl3 {
    background: #d1d1d1
  }
  .bl4 {
    background: #c1c1c1
  }
  /*block animations*/
  .bl1 {
    animation: bl1 2.3s infinite linear;
  }
  .bl2 {
    animation: bl2 2.3s infinite linear;
  }
  .bl3 {
    animation: bl3 2.3s infinite linear;
  }
  .bl4 {
    animation: bl4 2.3s infinite linear;
  }
}

@keyframes bl1 {
  0% {
    top: 0;
    left: 0;
  }
  20% {
    top: 0;
    left: $blockOffset;
  }
  25% {
    top: 0;
    left: $blockOffset;
  }
  45% {
    top: $blockOffset;
    left: $blockOffset;
  }
  50% {
    top: $blockOffset;
    left: $blockOffset;
  }
  70% {
    top: $blockOffset;
    left: 0;
  }
  75% {
    top: $blockOffset;
    left: 0;
  }
  95% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

@keyframes bl2 {
  0% {
    top: 0;
    left: $blockOffset;
  }
  20% {
    top: $blockOffset;
    left: $blockOffset;
  }
  25% {
    top: $blockOffset;
    left: $blockOffset;
  }
  45% {
    top: $blockOffset;
    left: 0;
  }
  50% {
    top: $blockOffset;
    left: 0;
  }
  70% {
    top: 0;
    left: 0;
  }
  75% {
    top: 0;
    left: 0;
  }
  95% {
    top: 0;
    left: $blockOffset;
  }
  100% {
    top: 0;
    left: $blockOffset;
  }
}

@keyframes bl3 {
  0% {
    top: 55%;
    left: 0;
  }
  20% {
    top: 0;
   ...