Retro_Vintage_Toast_Notifications_Component

<div class="fixed inset-x-0 bottom-0 p-4 sm:p-6 lg:p-8 z-50 pointer-events-none flex flex-col items-end space-y-4">
  <!-- Success Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Action Confirmed!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Your changes have been saved successfully. Good job!</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.766-1.85 1.9-3.35L13.737 4.1a1.5 1.5 0 00-2.674 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Error Encountered!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Unable to complete your request. Please try again later.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Information Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Heads Up!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">New features are rolling out soon. Stay tuned for updates.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>
</div>