JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
</head>
<body>
<div id="content-right">
<a href="" class="nav-link" id="link-home">Home</a>
<a href="" class="nav-link" id="link-works">Works</a>
<a href="" class="nav-link" id="link-contact">Contact</a>
</div>
</body>
</html>
CSS
.nav-link{
display: block;
padding: 5px;
background-color: #d9d9d9;
color: #ffffff;
text-decoration: none;
display: none;
margin-top: 2px;
}
#content-right{
width: 500px;
border: solid 1px #000;
}
JavaScript
$(window).ready(function(){
var c = 1;
$(".nav-link").each(function(){
var time = c * 500;
var id = $(this).attr("id");
setTimeout("fadeNavIn('"+ id +"')", time);
c++;
});
});
function fadeNavIn(objId){
$("#"+objId).fadeIn("slow");
}