JSFiddle - React, Tailwind, and code Playground

by ajai jothi

CSS

.popup
{
border-radius:10px;
border:1px solid skyblue;
position:absolute;
bottom:10px;
right:10px;
padding:10px 20px;
    display:none;
    background:skyblue;
    font-family:arial;
    font-size:12px;
    color:#333;
 }
.popup:after
{
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-top-color:skyblue;
    position:absolute;
    bottom:-10px;
    left:47%;
}

JavaScript

function showAlert(msg, hideDelay){
    hideDelay = hideDelay?hideDelay:3000;
   var elm = $('<div/>').addClass('popup').html(msg).appendTo('body').slideToggle('slow');
    
    setTimeout(function(){
        elm.fadeOut('slow', function(){
            $(this).remove();
        });
    }, hideDelay);
}

showAlert('Hi Stephen',5000);