JSFiddle - React, Tailwind, and code Playground

by halloleo

HTML

<!doctype html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>

  <div class="container mt-5">
    <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button>
    <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;">
      <div class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="mr-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    const toastEl = document.querySelector('.toast');
    let toast = new bootstrap.Toast(toastEl, { autohide: false })
    const toastButton = document.getElementById("liveToastBtn")
    toastButton.addEventListener("click", function () {
      console.log("Button was clicked!");
      toast.show()
    });
  </script>
</body>

</html>