JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="fade-item">Item 01</li>
    <li class="fade-item">Item 02</li>
    <li class="fade-item">Item 03</li>
    <li class="fade-item">Item 04</li>
    <li class="fade-item">Item 05</li>
</ul>

CSS

.fade-item {
    transition: 2s all ease-in-out;
    opacity: 0;
}

.fadein {
    animation: fadeIn 0.9s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

JavaScript

var items = document.getElementsByClassName("fade-item");
		for (let i = 0; i < items.length; ++i) {
      fadeIn(items[i], i * 1000)
    }
    function fadeIn (item, delay) {
      setTimeout(() => {
        item.classList.add('fadein')
      }, delay)
    }