JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<main1>
  <div class="led1 led"></div>
  <div class="led2 led"></div>
  <div class="led3 led"></div>
  <div class="led4 led"></div>
  <div class="led5 led"></div>
  <div class="led6 led"></div>
  <div class="led7 led"></div>
  <div class="led8 led"></div>
</main1>

<main2>
  <div class="led9 led"></div>
  <div class="led10 led"></div>
  <div class="led11 led"></div>
  <div class="led12 led"></div>
  <div class="led13 led"></div>
  <div class="led14 led"></div>
  <div class="led15 led"></div>
  <div class="led16 led"></div>
</main2>

SCSS

main1, main2 {
  position: absolute;
  display: flex;
  width: 180px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 53px;
}

.led {
  width: 9px;
  height: 11px;
  margin-right: 15px;
  border-radius: 7px;
  background: #ff0b22;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  box-shadow: 0 0 17px 6px rgba(255, 0, 24, 0.6);
}

$time: 1.6s;

.led1 {
  animation: ledblink $time infinite ease;
}

.led2 {
  animation: ledblink $time infinite ease;
  animation-delay: .2s;
}

.led3 {
  animation: ledblink $time infinite ease;
  animation-delay: .3s;
}

.led4 {
  animation: ledblink $time infinite ease;
  animation-delay: .4s;
}

.led5 {
  animation: ledblink $time infinite ease;
  animation-delay: .5s;
}

.led6 {
  animation: ledblink $time infinite ease;
  animation-delay: .6s;
}

.led7 {
  animation: ledblink $time infinite ease;
  animation-delay: .7s;
}

.led8 {
  animation: ledblink $time infinite ease;
  animation-delay: .8s;
}

.led16 {
  animation: ledblink $time infinite ease;
  animation-delay: .9s;
}

.led15 {
  animation: ledblink $time infinite ease;
  animation-delay: 1s;
}

.led14 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.1s;
}

.led13 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.2s;
}

.led12 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.3s;
}

.led11 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.4s;
}

.led10 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.5s;
}

.led9 {
  animation: ledblink $time infinite ease;
  animation-delay: 1.6s;
}

@keyframes ledblink {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}