JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<div class="box error" style="top: 5px; display: none; ">
    <ul>
        <li>Sorry, module is not available now...</li>
    </ul>
</div>

CSS

.box {
    position: absolute;
    width: 400px;
    top: 5px; 
    right: 5px;    
    overflow: none;
}
.box ul { padding: 0; margin: 0; list-style-type: none; }
.box.info, .box.success, .box.warning, .box.error, .box.validation {
    border: 1px solid;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.box.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../images/info.png');
}

JavaScript

var last = 5; 
$(function() { 
    $('.box').each(function(i) {
        var mb = $(this); 
        console.log('Height: ' + mb.height() 
                    + ', InnerHeight: ' + mb.innerHeight() 
                    + ', OuterHeight: ' + mb.outerHeight()); 
        mb.css('top', last).delay(2000 +
           parseInt(i)*300).fadeOut('slow'); 
        last += parseInt(mb.innerHeight()) + 5; 
    }); 
});