JSFiddle - React, Tailwind, and code Playground

HTML

<div id="side">
    <div class="push-notification">3.141Help, I'm stuck in an infinite scrolling universe that never ends!59265</div>
</div>

<input type="text" id="new" /><button id="add">Add</button>

CSS

#side {
    position: fixed;
    right: 10px;
    top: 10px;
}

.push-notification {
    background-color: #000;
    color: #fff;
    padding: 10px 15px 13px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    
    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    
    width: 200px;
    font-family: Arial;
    font-size: 12px;
    line-height: 1.4em;
    margin-bottom: 10px;
}

JavaScript

var length = $('.push-notification').length;

$('.push-notification').each(function(index){
    $(this).delay((length - index) * 3000).animate({
        'margin-top': 200,
        'opacity': 0
    }, 1500, function(){
        $(this).remove();
    });
});

$('#add').click(function(){
    $('<div />').addClass('push-notification').text($('#new').val()).hide().slideDown(300).delay(3000).animate({
        'margin-top': 200,
        'opacity': 0
    }, 1500, function(){
        $(this).remove();
    }).prependTo('#side');
    
    return false;
});