JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<ul> 
    <li class="sticky">Success notification that you have to remove</li> 
    <li class="regular">Regular Notification</li> 
    <li class="error">Error Notification</li> 
    <li class="success">Success Notification</li> 
    <li class="warning">Warning Notification</li>
    <li class="remove">Remove all active notifications</li> 
</ul>

CSS

.notification {
    display: block;
    position: absolute;
    z-index: 9999;
    color: rgba(0,0,0,0.8);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.3);
    border-top-color: rgba(255,255,255,0.2);
    border-bottom-color: rgba(255,255,255,0.2);
}
.notification .close {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
}
.notification p {
    display: inline-block;
    vertical-align: top;
    text-align: justify;
    padding: 0.6em 0 0.6em 0.9em;
    margin: 0 28px 0 0;
}
.notification.top {
    top: 0;
    left: 0;
    right: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.notification.bottom.right {
    bottom: 0;
    right: 0;
    border-right: 0;
    border-bottom: 0;
}
.notification.bottom.left {
    bottom: 0;
    left: 0;
    border-bottom: 0;
    border-left: 0;
}

/* notification colors */
.notification {
    background: rgb(195,217,255);
    background: -moz-linear-gradient(top, rgb(195,217,255) 0%, rgb(177,200,239) 41%, rgb(152,176,217) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(195,217,255)), color-stop(41%,rgb(177,200,239)), color-stop(100%,rgb(152,176,217)));
    background: -webkit-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%);
    background: -o-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%);
    background: -ms-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 );
    background: linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%);
}
.notification.success {
    background: rgb(210,255,82);
    background: -moz-linear-gradient(top, rgb(210,255,82) 0%, rgb(145,232,66)...

JavaScript

$(document).ready(function() {

    jQuery.noticeAdd({
        text: 'This is a simple notification using the jQuery notice plugin. Click the X above to remove this notice.',
        stay: true
    });


    $('.sticky').click(function() {
        jQuery.noticeAdd({
            text: 'This is a notification that you have to remove',
            stay: true,
            location: 'top',
            type: 'success'
        });
    });

    $('.regular').click(function() {
        jQuery.noticeAdd({
            text: 'This is a notification that will remove itself',
            stay: false,
            location: 'bottom left'
        });
    });


    $('.error').click(function() {
        jQuery.noticeAdd({
            text: 'This is an error notification!',
            stay: false,
            type: 'error',
            location: 'bottom right'
        });
    });


    $('.success').click(function() {
        jQuery.noticeAdd({
            text: 'This is a success notification!',
            stay: false,
            type: 'success',
            location: 'top'
        });
    });
    
    $('.warning').click(function() {
        jQuery.noticeAdd({
            text: 'This is a warning notification!',
            stay: false,
            type: 'warning',
            location: 'bottom left'
        });
    });

    $('.remove').click(function() {
        jQuery.noticeRemove($('.notification'), 400);
    });
});



(function(jQuery) {
    jQuery.extend({
        noticeAdd: function(options) {
            var defaults = {
                inEffect: {
                    opacity: 'show'
                },
                // in effect
                inEffectDuration: 600,
                // in effect duration in miliseconds
                stayTime: 5000,
                // time in miliseconds before the item has to disappear
                text: '',
                // content of the item
                stay: false,
                // should the notice item stay or...