JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<button id="show">Show notification</button>

CSS

button{width: 150px;transition: width .600s cubic-bezier(0.770, 0.000, 0.175, 1.000);}
button:hover{width: 400px}

JavaScript

function notificationExecutionContext() {
    
   var notification,
       notificationTimeout = 5000, // close notification after 5 sec
       notificationTitle = "Tambo-Studio", // notification Title
       notificationBody = { // notification execution context object
            dir: "auto", // notification direction 
            lang: "en", // notification language
            body: "This is a notification body", // notification body
            tag: "sometag", // notification tag
            icon: 'http://cs619330.vk.me/v619330731/7b5/mDt0FTWp3f4.jpg'// notififaction icon
        };

  // check the permission 
  if (window.Notification && Notification.permission === 'granted') {
  // show the notifications
    notification = new Notification(notificationTitle, notificationBody );
    notification.onshow = function () { 
      setTimeout(notification.close.bind(notification), notificationTimeout); 
    }
  } else {
  // request a user permission 
      Notification.requestPermission(function (status) {
          if (Notification.permission !== status) {
            Notification.permission = status;
          }
      });
  }

}

document.querySelector("#show").addEventListener("click", notificationExecutionContext, false);