JSFiddle - React, Tailwind, and code Playground

by Belle Jema Bantilan

HTML

<div class="gallery">
    <div></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

CSS

.gallery{ position: relative; }
.gallery div{ width: 150px; height: 150px; border-radius: 100%; position: absolute; left: 0; top: 0; background: red; }

.gallery div.second{ background: blue; }
.gallery div.third{ background: yellow; }

JavaScript

$(document).ready(function(){
  function infinite() {
      $(".gallery div").each(function(i) {
        $(this).hide();
        $(this).delay(1500*i).fadeIn(1000).fadeOut(1000);
      }).promise().done(infinite);
  }
  infinite();
});