Toast Notifications Component

<div class="fixed inset-x-0 bottom-4 z-50 flex flex-col items-center justify-center space-y-3 px-4 sm:items-end sm:px-6">
  
  <!-- Success Notification -->
  <div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-purple-600 dark:text-purple-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3 w-0 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Confirmed!</p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">Your appointment for 'Dental Check-up' on Nov 15th at 10:00 AM has been successfully reserved.</p>
        <div class="mt-3 flex space-x-2">
          <button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
            View Details
          </button>
          <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-4 flex flex-shrink-0">
        <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>

  <!-- Error/Warning Notification -->
  <div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" 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.76-1.85 1.9-3.35L13.743 3.373c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <div class="ml-3 w-0 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Failed</p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">The selected time slot for 'Haircut' on Dec 1st at 3:00 PM is no longer available. Please choose another time.</p>
        <div class="mt-3 flex space-x-2">
          <button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
            Browse Slots
          </button>
          <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-4 flex flex-shrink-0">
        <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>

</div>