JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="sample">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Nth Item</li>
</ul>
CSS
#sample li{
display: none;
}
JavaScript
$.fn.show_items = function(duration, delay) {
return this.each(function(index) {
var thisLi = $(this);
setTimeout(function(){
thisLi.fadeIn(duration);
}, delay * index);
});
};
// function usage
$('#sample li').show_items(50, 100);