JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

Also provide the callback function with this plugin

CSS

body
{
    font-family:GEORGIA;
}
.notify-container
{
    background:#ffffff;
    padding:15px;
    width:400px;
    margin:0 auto;
    border:solid 5px #fff;
    color:#222;
    text-shadow:0px 0px 1px #fff;
    border-radius:5px;
    box-shadow:0px 0px 5px #aaa;
    position:fixed;
    top:10%;
    text-align:left;    
    cursor:pointer;
}
.notify-icon
{
    background-image:url("http://dl.dropbox.com/u/40036711/Icons-Notify-Plugin/sprite.png");
    background-color:transparent;
    background-repeat:no-repeat;
    height:16px;
    width:16px;
}
.notify-close
{
    float:right;    
    background-position:-78px 0px;  
    opacity:0.5; 
}
.notify-status
{
    float:left;
    margin-right:10px;    
}
.notify-success
{
    background-position:-52px 0px;
    
}
.notify-error
{
    background-position:-26px 0px;
}
.notify-warning
{
    background-position:0px 0px;
}

JavaScript

var msg = "This is just a small notification!";

$('body').append('<div class="notify-container">'+
     '<a class="notify-icon notify-close"></a>'+
     '<span class="notify-icon notify-status"></span>'+
     '<div class="notify-message"></div>'+
     '</div>');

$(".notify-container").attr("title","click to close");
$(".notify-message").html(msg);
$(".notify-status").addClass("notify-error");

$(".notify-container").click(function(){
    $(this).fadeOut(400);
});