JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="circle"></div>

SCSS

$size = 150px; 
$bg: #52e293;
$sh: 50px;
$op = .4;
.circle {
  width: $size;
  height: $size;
  margin: 50px;
  animation: bg ease-out 2.5s infinite;
  display: block;
  border-radius: 20%;
  border: 20px solid;
}
@mixin bs($s1,$s2,$s3,$s4,$s5,$s6,$s7, $s8) {
  box-shadow: inset $s1 $s2 0 $sh/2 rgba(darken($bg, 20%), .25), 
              inset $s3 $s4 0 $sh/2 rgba(darken($bg, 10%), .25),
              inset $s5 $s6 0 $sh/2 rgba(lighten($bg, 0%), .25),
              inset $s7 $s8 0 $sh/2 rgba(lighten($bg, 10%), .25),
              inset $s1 $s2 0 $sh/1 rgba(darken($bg, 20%), .15), 
              inset $s3 $s4 0 $sh/1 rgba(darken($bg, 10%), .15),
              inset $s5 $s6 0 $sh/1 rgba(lighten($bg, 0%), .15),
              inset $s7 $s8 0 $sh/1 rgba(lighten($bg, 10%), .15),
              inset $s1 $s2 0 $sh/.5 rgba(darken($bg, 20%), .1), 
              inset $s3 $s4 0 $sh/.5 rgba(darken($bg, 10%), .1),
              inset $s5 $s6 0 $sh/.5 rgba(lighten($bg, 0%), .1),
              inset $s7 $s8 0 $sh/.5 rgba(lighten($bg, 10%), .1);
}

@mixin rotate($angle){
  transform: rotate(90deg*$angle);
}

@mixin gradient($bg) {
  background: #fff;
}

@-webkit-keyframes bg {
  0% {
      $bg: #1abc9c;
      @include gradient($bg);
      border-color: rgba($bg, $op);
      @include bs(
        -$sh, -$sh, 
        $sh, $sh, 
        -$sh, $sh, 
        $sh, -$sh
      );
      @include rotate(0);
  }
  25% {
      $bg: #2ecc71;
      @include gradient($bg);
      border-color: rgba($bg, $op);
      @include bs(
        -$sh, $sh, 
        $sh, $sh, 
        -$sh, -$sh, 
        $sh, -$sh
      );
      @include rotate(1);
  }
  50% {
      $bg: #e74c3c;
      @include gradient($bg);
      border-color: rgba($bg, $op);
      @include bs(
        -$sh, -$sh, 
        $sh, $sh, 
        -$sh, $sh, 
        $sh, -$sh
      );
      @include rotate(2);
  }
  75% {
      $bg: #9b59b6;
      @include gradient($bg);
      border-color: rgba($bg, $op);
      @include bs(
        -$sh,...