JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
CSS
.item {
opacity: 0;
transition: opacity .8s;
}
.mostrar {
opacity: 1 !important;
}
JavaScript
(function () {
var speed = 1000;
var items = document.querySelectorAll('ul li');
var index = 0;
function iterar() {
setTimeout(iterar, speed);
items[index].classList.toggle('mostrar');
index++;
if (index == items.length) index = 0;
}
iterar();
})();