JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/noty.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/noty.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/themes/nest.css">

<div id="log"></div>

CSS

body { font-family: sans-serif; -webkit-font-smoothing: antialiased; }

JavaScript

let log = document.getElementById('log');

new Noty({
   type: 'success',
   layout: 'bottomLeft',
   theme: 'nest',
   text: 'Hello, just testing! 🤖',
   timeout: '4000',
   progressBar: true,
   closeWith: ['click'],
   killer: true,
   callbacks: {
      beforeShow: function() {
         log.insertAdjacentHTML('beforeend', 'Preparing... ⏱<br/>');   
      },
      onShow: function() {
         log.insertAdjacentHTML('beforeend', 'Showed ✨<br/>');
      },
      onHover: function() {
         log.insertAdjacentHTML('beforeend', 'Hovered 👀<br/>');
      },
      onClick: function() {
        log.insertAdjacentHTML('beforeend', 'Clicked ✅<br/>');
      },
      onClose: function() {
         log.insertAdjacentHTML('beforeend', 'Bye 👋🏻<br/>');
      }
   },
}).show();