JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

.a {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
  animation-delay: 1s;
  animation: fade 1s forwards;
}


.b {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
  animation-delay: 2s;
  animation: fade 2s forwards;
}


.c {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
  animation-delay: 3s;
  animation: fade 3s forwards;
}


@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}}