JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li id="t">Home</li>
        <li id="r">About</li>
        <li id="e">Profile</li>
        <li id="w">Sign In</li>
        <li id="q">Contact</li>
</ul>

CSS

li {    
display: inline-block;
padding: 7px;
margin-top: 20px;
opacity: 0;
}

JavaScript

$('#q')
.animate({marginTop: '-=20', opacity: 1}, 2000);
$('#w')
.delay(300)
.animate({marginTop: '-=20', opacity: 1}, 2000);