JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<div class="msg-container">
</div>
<br />
<br />
<br />
<a href="#" onclick="javascript: maintenance_text('TEST'); return false;">Click here...</a>
<div style="height:500px">
</div>

CSS

.maintenance_text{
    position:relative;
}

.msg-container{
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
}

JavaScript

function maintenance_text(e) {
	$('.msg-container')
    
    .append('<div class="maintenance_text" style="left: 0px; right: 0px; background: black; color: white; font-size: 16px; cursor: default;">'+e+'</div>')
    
    .before(function() {
    
        $('.maintenance_text')
        .delay(3000)
        .fadeOut(function() {
            $(this).remove();
        });
        
    });

};