Simple Toast

toast.html

<div id="toast" class="hidden">
  <span id="toast-message">Success message</span>
</div>

<script>
  function showToast(message, type = 'success') {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');

    toastMessage.textContent = message;

    toast.className = `fixed hidden scale-0 transition bottom-6 right-6 py-4 px-8 rounded shadow-md text-white font-semibold z-50 ${type === 'success' ? 'bg-green-600' : 'bg-red-600'}`;

    setTimeout(() => {
      toast.classList.remove('hidden');

      setTimeout(() => {
        toast.classList.remove('scale-0');
        toast.classList.add('scale-100');
      }, 10);
    }, 10);

    setTimeout(() => {
      toast.classList.remove('scale-100');
      toast.classList.add('scale-0');

      setTimeout(() => {
        toast.classList.add('hidden');
      }, 250);
    }, 3000);
  }
</script>