JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
Title
</h2>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

CSS

body {
  background: #202731;
  color: #FFF;
  font-family: sans-serif;
}
h2, li {
  display: none;
}

JavaScript

var title = $("h2"),
	  listItems = $("ul li");

function wait(delay) {
  return new Promise(function(resolve) {
    setTimeout(resolve, delay);
  });
}

async function reveal() {
  for (var i = 0; i < listItems.length; i++) {
    $(listItems[i]).fadeTo(2000, 1);
    await wait(250);
  }
}

title.fadeTo(500, 1)
	//.promise().done(reveal) doesn't work!
	.promise().done(function() {
  	reveal();
  });