JSFiddle - React, Tailwind, and code Playground

HTML

<button id="notifyMe">notifyMe</button>
<button id="authorize">Authorize notification</button>
<button id="show">Show notification</button>
<button id="show_another">Show another notification</button>

JavaScript

function authorizeNotification() {
    Notification.requestPermission(function(perm) {
        alert(perm);
    });
}
function showNotification(myTag) {
    var notification = new Notification("This is a title with tag " + myTag, {
        dir: "auto",
        lang: "",
        body: "This is a notification body with tag " + myTag,
        tag: myTag,
    });
}
function notifyMe() {
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }
  else if (Notification.permission === "granted") {
        var options = {
                body: "This is the body of the notification",
                icon: "icon.jpg",
                dir : "ltr"
             };
          var notification = new Notification("Hi there",options);
  }
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if (!('permission' in Notification)) {
        Notification.permission = permission;
      }
    
      if (permission === "granted") {
        var options = {
              body: "This is the body of the notification",
              icon: "icon.jpg",
              dir : "ltr"
          };
        var notification = new Notification("Hi there",options);
      }
    });
  }
}
document.querySelector("#notifyMe").onclick = notifyMe;
document.querySelector("#authorize").onclick = authorizeNotification;
document.querySelector("#show").onclick = function(){ showNotification("firstTag"); };
document.querySelector("#show_another").onclick = function(){ showNotification("secondTag"); };