JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

SCSS

$m-blue: #3b6e98;
$m-orange: #fbac2a;
	
$primary: $m-blue;
$accent: $m-orange;
$max: 999999;

notification-toast {
    font-family: sans-serif;
	pointer-events: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: $primary;
	color: #fff;
	padding: 10px 15px;
	box-shadow: 0 2px 0 $accent, 0 0 20px transparentize($accent, 0.5);
	animation: toast 3s ease;
	z-index: $max;

	&.red {
		box-shadow: 0 2px 0 #ff3333;
	}
}

@keyframes toast {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}
	10% {
		transform: none;
		opacity: 1;
	}
	90% {
		transform: none;
		opacity: 1;
	}
	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}

JavaScript

//Handles "notifications" that appear and automatically disappear at the edge of the viewport
var notif;
var notif_timeout;

function notification(options) {
    if (!options.message) return;
    if (notif) notif.remove();

    if (options.refresh) {
        options.refresh = false;
        localStorage.notification = JSON.stringify(options);
        window.location.reload();
        return;
    }

    clearTimeout(notif_timeout);

    notif = $("<notification-toast></notification-toast>").text(options.message);
    if (options.error) notif.addClass("red");
    $(document.body).append(notif);
    notif_timeout = setTimeout(function () {
        notif.remove();
    }, 3000);
}

$(function () {
    document.registerElement("notification-toast");
    if (localStorage.notification) {
        var options = JSON.parse(localStorage.notification);
        localStorage.removeItem("notification");
        notification(options);
    }
});

//Test:

notification({
    message: "This is a message",
    options: [{
        label: "Undo",
        callback: function () {
            alert("undid!");
        }
    }]
});