JSFiddle - React, Tailwind, and code Playground

by Natta Wang

CSS

.dijitToasterMessage{ 
    color:#fff;
}

.dijitToasterContent {
    padding:1em;
    padding-top:0.50em;
    padding-bottom:0.50em;
    background:#313131;
    border-radius: 6px;
    border: 2px solid #afafaf;
    cursor: pointer;
}

JavaScript

require(["dojox/widget/Toaster", "dojo/_base/connect"],
  function(Toaster, connect) {
    connect.subscribe('app/error');
    connect.subscribe('app/info');
    var errors = new dojox.widget.Toaster({
        messageTopic: '/app/error',
        positionDirection: 'br-up',
        duration: 5000
    });
    var info = new dojox.widget.Toaster({
        messageTopic: '/app/info',
        positionDirection: 'tr-down',
        duration: 5000
    });
    
    connect.publish('/app/error', ["Error Message!"]);
    
    window.setTimeout(function(){
        connect.publish('/app/info', ["New E-Mail"]);
    }, 1000);
    window.setTimeout(function(){
        connect.publish('/app/info', ["New SMS"])
    }, 3000);
    window.setTimeout(function(){
        connect.publish('/app/info', ["New Fax"])
    }, 6000);
});