JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<input type="button" value="info" class="btn">

CSS

body{
    font-family:arial;
}
._notification-container{
    position:absolute;
    width:300px;
    padding:10px;
    max-width:100%;
    font-family:inherit;
    z-index: 90000000;
}
._notification-container.top{
    top:0;
}
._notification-container.left{
    left:0;
}
._notification-container.right{
    right:0;
}
._notification-container.bottom{
    bottom:0;
}
._notification-container ._notification:after{
    clear:both;
    display:block;
    content:"";
}
._notification-container ._notification{
    display:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
    background:#000;
    opacity: 0.75;
    color:white;
    border-radius:5px;
    font-size: 13px;
    margin: 5px;
    -webkit-box-shadow: 0 0 3px #000;
    -moz-box-shadow: 0 0 3px #000;
    box-shadow: 0 0 3px #000;
}
._notification-container ._notification ._msg{
    float:left;
    padding-top:4px;
    width:80%;
}
._notification-container ._notification .fa{
    color:#4679bd;    
    float:left;
    margin-right: 10px;
}
._notification-container ._notification.success .fa{
    color:green;
}
._notification-container ._notification.warning .fa{
    color:orange;
}
._notification-container ._notification.error .fa{
    color:red;
}

JavaScript

(function($,window,document,undefined){
    $.notify = function(msg, options){
        options = options || {};
        var template = [''],
            container = $('._notification-container').length?$('._notification-container'):$('<div class="_notification-container" />').appendTo('body'),
            position = options.position || "top right",
            delay = options.delay==undefined?5:options.delay,
            notification = $('<div class="_notification"><div class="_msg"></div></div>'),
            type = options.type || 'info',
            icon = "";
        
        switch(type){
            case 'success':
                icon = " fa-check-circle";
                break;
            case 'warning':
                icon = "fa-exclamation-triangle";
                break;
            case 'error':
                icon = "fa-times-circle";                
                break;
            default:
                icon = "fa-info-circle";
                break;
        }
        
        if(typeof msg === "object")
            notification.find('._msg').append(msg);
        else
            notification.find('._msg').html(msg);
        
        notification.prepend('<i class="fa fa-2x '+icon+'"/> ');
        notification.addClass(type).appendTo(container);
        container.removeClass('top right bottom left').addClass(position);
        notification.fadeIn();
        notification.close = function(){
            this.fadeOut(function(){
                this.remove();
                if(!container.find('._notification').length)
                container.remove();
            });
        };
        notification.on('click', function(){
            notification.close();
        });
        if(delay>0)
        setTimeout(function(){
            notification.close();
        }, delay*1000);
        
        return notification;
    };
})(jQuery, window, document);


$('.btn').on('click', function(){
    $.notify('Test Warning...