JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div id='notification-box'>howdy</div>
<div id='showstatus'>empty</div>
<div id='startme'>click to start</div>

CSS

#notification-box {border:solid lime 1px;}
.showslow{background-color:aqua;}

JavaScript

function show_notification_on_top(message, type) {
    content = "<a class='notify-close' href='#'>close</a>" + "<p>" + message + "</p>";
    $("#notification-box").fadeIn('slow').delay(60000).fadeOut('slow');
    $("#notification-box").html(content);
}

$(document).on('click', '.notify-close', function() {
    $('#notification-box').dequeue();
});

$('#startme').click(function() {
    show_notification_on_top('say what');
});