JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_toast(true);">Pause on Hover</button>
<br>
<button class="btn-block btn-primary" onclick="show_image_toast();">Show Image Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>

<script>
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]'
  });

  const TYPES = ['info', 'warning', 'success', 'error'],
    TITLES = {
      'info': 'Notice!',
      'success': 'Awesome!',
      'warning': 'Watch Out!',
      'error': 'Doh!'
    },
    CONTENT = {
      'info': 'Hello, world! This is a toast message.',
      'success': 'The action has been completed.',
      'warning': 'It\'s all about to go wrong',
      'error': 'It all went wrong.'
    };

  function show_random_toast(pause_on_hover = false) {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      title = TITLES[type],
      content = CONTENT[type];

    $.toast({
      title: title,
      subtitle: '11 mins ago',
      content: content,
      type: type,
      pause_on_hover: pause_on_hover,
      delay: 5000
    });
  }

  function show_image_toast() {
    let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      title = TITLES[type],
      content = CONTENT[type];

    $.toast({
      title: title,
      subtitle: '11 mins ago',
      content: content,
      type: type,
      delay: 5000,
      img: {
        src: 'https://via.placeholder.com/25',
        class: 'rounded',
        title: 'Thumbnail...

CSS

#toast-container {
  position: sticky;
  z-index: 1055;
  top: 0;
}

#toast-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
}

#toast-container>#toast-wrapper>.toast {
  min-width: 150px;
}

#toast-container>#toast-wrapper>.toast>.toast-header strong {
  padding-right: 20px;
}

JavaScript

/**
 * @author Script47 (https://github.com/Script47/Toast)
 * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
 * @version 0.7.0
 **/
(function(b) {
  b.toast = function(c) {
    b("#toast-container").length || (b("body").prepend('<div id="toast-container" aria-live="polite" aria-atomic="true"></div>'), b("#toast-container").append('<div id="toast-wrapper"></div>'), b("body").on("hidden.bs.toast", ".toast", function() {
      b(this).remove()
    }));
    var h = "toast-" + (b(".toast").length + 1),
      a = "",
      e = a = "",
      f = "text-muted",
      g = "",
      q = c.title || "Notice!",
      r = c.subtitle || "",
      p = c.content || "",
      k = c.delay || -1,
      d = c.img,
      l = c.pause_on_hover || !1,
      m = !1,
      n = "";
    switch (c.type || "info") {
      case "info":
        a =
          "bg-info";
        g = f = e = "text-white";
        break;
      case "success":
        a = "bg-success";
        g = f = e = "text-white";
        break;
      case "warning":
      case "warn":
        a = "bg-warning";
        g = f = e = "text-white";
        break;
      case "error":
      case "danger":
        a = "bg-danger", g = f = e = "text-white"
    }!1 !== l ? (c = Math.floor(Date.now() / 1E3) + k / 1E3, n = 'data-autohide="false"', l = 'data-hide-timestamp="' + c + '"') : n = -1 === k ? 'data-autohide="false"' : 'data-delay="' + k + '"';
    a = '<div id="' + h + '" class="toast" role="alert" aria-live="assertive" aria-atomic="true" ' + n + " " + l + ">" + ('<div class="toast-header ' +
      a + " " + e + '">');
    "undefined" !== typeof d && (a += '<img src="' + d.src + '" class="' + (d["class"] || "") + ' mr-2" alt="' + (d.alt || "Image") + '" ' + ("undefined" !== typeof d.title ? 'data-toggle="tooltip" title="' + d.title + '"' : "") + ">");
    a = a + ('<strong class="mr-auto">' + q + "</strong>") + ('<small class="' + f + '">' + r + "</small>");
    a += '<button type="button" class="ml-2...