JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<ul>
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
</ul>

CSS

.animations{
  color:red;
 }
 ul {
     display: flex;
 }
  .item {
    padding: 20px;
    width:25%;
    margin: 10px;
    border: 1px solid transparent;
    transition: all 0.3s;
  }
  .show {
    border: 1px solid #ccc;
  }

JavaScript

$('ul li').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('animations'); }, (i+1) * 1500);
});

const listItems = document.querySelectorAll('ul li');
for (let i = 0; i < listItems.length; i++) {
  setTimeout(function(){ listItems[i].classList.add('animations'); }, (i+1) * 1500);
}


function animateNext() {
  var elements = document.querySelectorAll('ul li:not(.show)');
  if (elements.length) {
    elements[0].classList.add('show');
    setTimeout(animateNext,2000);
  }
}

animateNext();