JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<a href="#" data-msg="Poda Naye!!!" data-type="info">One</a>
<a href="#" data-msg="Poda Venna!!!" data-type="error">Two</a>
<a href="#" data-msg="Pikkali Payale!!!" data-type="warn">Three</a>

<div class="notification">
    Poda Naye! :)
</div>

CSS

body {margin: 0; padding: 0; overflow: hidden;}
.notification {position: absolute; bottom: 0; text-align: center; padding: 10px 0; width: 100%;}
a {padding: 20px 10px; display: inline-block;}
.info {background: #00f; color: #fff;}
.error {background: #f00; color: #fff;}
.warn {background: #0f0; color: #000;}

JavaScript

function message(msg, cls)
{
    $(".notification").stop().html(msg).removeClass("info error warn").addClass(cls).animate({
        bottom: 0
    }, 1000, function(){
        $(this).delay(2000).animate({
            bottom: -$(".notification").outerHeight()
        }, 1000);
    });
}

$(document).ready(function(){
    $(".notification").css('bottom', -$(".notification").outerHeight());
    $("a").click(function(){
        message($(this).data("msg"), $(this).data("type"));
        return false;
    });
});