JSFiddle - React, Tailwind, and code Playground

Css-animations, sass

by schrodingers

HTML

<div id="main">
  <div class="a-1">
  </div>
  <div class="a-2">
  </div>
  <div class="a-3">
  </div>
  <div class="a-4">
  </div>
  <div class="a-5">
  </div>
</div>

SCSS

#main {
  display: flex;
  flex-flow: column nowrap;
  align-items: space-around;
  justify-content: space-between;
}

div[class^="a"] {
  box-sizing: border-box;
  margin-top: 2em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
}

@for $i from 1 through 5 {
  .a-#{$i} {
    background-color: hsl(50 * $i, 90%, 50%);
  }
}