JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Hello</h1>
<div id="student-banner">Student</div>
<div id="teacher-banner">Teacher</div>
CSS
div {
display: none;
}
JavaScript
$(document).ready(function () {
var banners = [
"#student-banner",
"#teacher-banner"
];
var i;
$.each(banners, function(index, id) {
fadeInOut(id, 5000);
});
function fadeInOut(id, delay) {
$(id).delay(delay).fadeIn("slow").delay(2000).fadeOut();
}
});