JSFiddle - React, Tailwind, and code Playground

HTML

<div class="notification-container"></div>

CSS

.notification-container {
	position: relative;
	opacity: 0;
	width: 100%;
	height: 56px;
	background: #ccc;

}

.alert-success, .alert-error {
		width: 100%;
		height: 56px;
		text-align: center;
		line-height: 56px;
		color: white;
		cursor: pointer;
}
.alert-success { width: 100%; background: blue; }
.alert-error { width: 100%; background: red; }

JavaScript

var jsonFakeBoolean = true;

if (jsonFakeBoolean) {
    $container = $('<div id="notification-div">');
    $container.html($('<h4>').html('This is an Alert MSG!'));
    $container.addClass('alert-success');
    $container.hide();
	$container.appendTo('.notification-container');
	$container.slideDown('slow');
    
    $('.notification-container').fadeIn('slow');
	$('.notification-container').animate({
        opacity: 1,
	    height:'+=56px' },
		500, function() {
		/* stuff to do after fading in is done */
            setTimeout(function () {
                $('.notification-container').fadeOut('slow', function () {
                    $('.notification-container').empty();
                    alert('done');
                });
            }, 1000);
	    });
    
	return $container;
}