Search Components

Toast Notifications

Brief, non-intrusive notifications

Brutalism Toast Notifications Component

A set of brutalist-inspired toast notifications with a warm neutral color scheme, suitable for booking/reservation systems. Features raw, bold contrasts and responsive design with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">

  <!-- Container for Toast Notifications -->
  <div class="fixed bottom-4 right-4 z-50 flex flex-col space-y-4 w-full max-w-xs sm:max-w-sm lg:max-w-md pointer-events-none">

    <!-- Success Toast - Booking Confirmed -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-amber-200 dark:bg-amber-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Confirmed!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Your reservation for Dr. Smith on Feb 14th at 3 PM is all set.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-amber-200 dark:focus:ring-offset-amber-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 fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Info Toast - Reminder/Update -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-stone-200 dark:bg-stone-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 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-lg sm:text-xl font-extrabold uppercase tracking-wide">Appointment Reminder</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Just a friendly reminder for your 3 PM booking tomorrow.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-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 fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Warning Toast - Potential Issue -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-fuchsia-200 dark:bg-fuchsia-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Action Required!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Slot for 4 PM on Feb 15th is now limited. Please confirm soon.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-fuchsia-200 dark:focus:ring-offset-fuchsia-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 fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Error Toast - Booking Failed -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-red-200 dark:bg-red-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-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-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Failed!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">The selected slot is no longer available. Please try again.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-red-200 dark:focus:ring-offset-red-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 fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Art Deco Toast Notifications Component

A simple, high-contrast toast notification component with an Art Deco aesthetic, suitable for news and journalism websites. Features responsive design and dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
  <!-- Success Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
  <div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
      <svg class="w-6 h-6 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Success!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
    <div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
      <svg class="w-6 h-6 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .md\:animate-slide-in-right {
    animation: none; /* Reset for mobile */
  }

  @media (min-width: 768px) {
    .md\:animate-slide-in-right {
      animation: slide-in-right 0.5s ease-out forwards;
    }
  }
</style>

Toast Notifications Component

A responsive toast notification component with jewel tone gradient transitions, designed for government/public service websites, supporting light and dark modes.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm p-4 pointer-events-none">
  <!-- Success Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Success!</p>
        <p class="mt-1 text-sm text-emerald-100 dark:text-emerald-200">Your request has been processed successfully.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-emerald-100 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-600 dark:to-teal-700 animate-pulse-width"></div>
  </div>

  <!-- Information Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Information</p>
        <p class="mt-1 text-sm text-blue-100 dark:text-blue-200">Further details are available on the new page.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-800 animate-pulse-width"></div>
  </div>

  <!-- Warning Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-yellow-500 to-orange-600 dark:from-yellow-700 dark:to-orange-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.51a1 1 0 011.486 0L17.5 11.25a1 1 0 01-.743 1.75H3.243a1 1 0 01-.743-1.75L8.257 3.51zM10 14a1 1 0 100 2 1 1 0 000-2zm-1-6a1 1 0 012 0v3a1 1 0 11-2 0V8z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Warning!</p>
        <p class="mt-1 text-sm text-yellow-100 dark:text-yellow-200">Data submission has pending issues.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-yellow-100 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-300 to-yellow-400 dark:from-yellow-600 dark:to-orange-700 animate-pulse-width"></div>
  </div>

  <!-- Error Toast -->
  <div class="rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Error!</p>
        <p class="mt-1 text-sm text-red-100 dark:text-red-200">Failed to submit the form. Please try again.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-red-100 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rose-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-300 to-red-400 dark:from-red-600 dark:to-rose-700 animate-pulse-width"></div>
  </div>

  <style>
    @keyframes pulse-width {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }
    .animate-pulse-width {
      animation: pulse-width 5s linear forwards;
    }
    /* Further animations for show/hide (requires JS for full functionality, but here for visual intent) */
    .hide-toast {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    .show-toast {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Responsive Adjustments */
    @media (max-width: 639px) {
        .fixed.bottom-4.right-4 {
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            max-width: none;
            padding: 1rem;
            padding-bottom: 0;
        }
        .fixed.bottom-4.right-4 > div {
            margin-bottom: 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        .fixed.bottom-4.right-4 > div:last-child {
            margin-bottom: 0;
        }
    }
  </style>
</div>

Toast Notifications Component

A simple, artistic, and colorful toast notification component for e-commerce, featuring watercolor-like soft textures and a rainbow gradient. Fully responsive with dark mode support.

Open Preview

                <div class="fixed inset-x-0 bottom-4 z-50 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="flex w-full max-w-sm flex-col space-y-3">

    <!-- Success Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 p-4 shadow-lg dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1053/600/400?blur=5'); background-size: cover; background-position: center;"></div>
      
      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-green-700 dark:text-green-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Item Added to Cart!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Info Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-teal-200 via-cyan-200 to-blue-200 p-4 shadow-lg dark:from-teal-800 dark:via-cyan-800 dark:to-blue-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1060/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Free shipping on orders over $50!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Warning Notification (Placeholder, not primary for e-commerce success/info) -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-yellow-200 via-orange-200 to-red-200 p-4 shadow-lg dark:from-yellow-800 dark:via-orange-800 dark:to-red-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1069/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-orange-700 dark:text-orange-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Quantities are limited!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

  </div>
</div>

Retro_Vintage_Pastel_Finance_Toast_Notifications

A complex, responsive toast notifications component with a retro/vintage aesthetic, pastel color scheme, designed for finance/banking interfaces. Includes dark mode support and multiple notification types.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono relative overflow-hidden">

  <!-- Retro CRT Scanline Overlay (Visual Effect Only) -->
  <div class="fixed inset-0 pointer-events-none z-50 opacity-10 dark:opacity-5" style="background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%;">
  </div>

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-violet-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-fuchsia-300 dark:border-fuchsia-700 relative z-10 animate-fade-in-down">
    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-t-sm border-b-2 border-fuchsia-400 dark:border-fuchsia-600">
      <div class="flex justify-between items-center">
        <h2 class="text-2xl font-bold text-fuchsia-800 dark:text-fuchsia-300 tracking-wider uppercase drop-shadow-sm">System Alerts</h2>
        <div class="flex space-x-1">
          <span class="block w-3 h-3 bg-red-400 rounded-full border border-red-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-yellow-400 rounded-full border border-yellow-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-lime-400 rounded-full border border-lime-500 shadow-inner"></span>
        </div>
      </div>
    </div>

    <div class="p-4 md:p-6 space-y-4">

      <!-- Success Notification -->
      <div class="flex items-start p-3 bg-lime-100 dark:bg-green-900 border-2 border-lime-400 dark:border-green-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right">
        <div class="flex-shrink-0 text-lime-700 dark:text-green-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <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 flex-1">
          <p class="text-sm md:text-base font-semibold text-lime-800 dark:text-green-200">Transaction Complete!</p>
          <p class="text-xs md:text-sm text-lime-700 dark:text-green-300 mt-0.5">Your payment of <span class="font-bold">$1,200.00</span> to ACME Corp. was successful.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-lime-600 dark:text-green-400 hover:text-lime-800 dark:hover:text-green-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-green-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Warning Notification -->
      <div class="flex items-start p-3 bg-yellow-100 dark:bg-yellow-900 border-2 border-yellow-400 dark:border-yellow-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-200">
        <div class="flex-shrink-0 text-yellow-700 dark:text-yellow-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-yellow-800 dark:text-yellow-200">Attention Required</p>
          <p class="text-xs md:text-sm text-yellow-700 dark:text-yellow-300 mt-0.5">High balance on Savings Account: <span class="font-bold">$98,765.43</span>. Consider diversifying.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Error Notification -->
      <div class="flex items-start p-3 bg-red-100 dark:bg-red-900 border-2 border-red-400 dark:border-red-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-400">
        <div class="flex-shrink-0 text-red-700 dark:text-red-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-red-800 dark:text-red-200">Payment Failed!</p>
          <p class="text-xs md:text-sm text-red-700 dark:text-red-300 mt-0.5">Unable to process <span class="font-bold">$50.00</span> payment. Insufficient funds.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Info Notification with Avatar -->
      <div class="flex items-start p-3 bg-blue-100 dark:bg-blue-900 border-2 border-blue-400 dark:border-blue-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-600">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300 text-xl md:text-2xl pt-0.5">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md object-cover">
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-blue-800 dark:text-blue-200">New Message from Support</p>
          <p class="text-xs md:text-sm text-blue-700 dark:text-blue-300 mt-0.5">Your inquiry regarding account #<span class="font-semibold">XYS890</span> has been answered.</p>
          <a href="#" class="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1 block">View Details</a>
        </div>
        <button class="flex-shrink-0 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-b-sm border-t-2 border-fuchsia-400 dark:border-fuchsia-600 flex justify-center text-sm text-fuchsia-700 dark:text-fuchsia-400">
      <p>Notifications generated: <span class="font-bold">4</span></p>
    </div>

  </div>

  <!-- Tailwind JIT Animations (add to tailwind.config.js for full effect) -->
  <style>
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-down {
      animation: fadeInDown 0.6s ease-out forwards;
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-slide-in-right {
      animation: slideInRight 0.5s ease-out forwards;
    }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-600 { animation-delay: 0.6s; }
  </style>
</div>

Retro_Vintage_Toast_Notifications_Component

A simple, retro/vintage-themed toast notification component for CRM/business tools, featuring warm neutrals, responsive design, and dark mode support.

Open Preview

                <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>

Skeuomorphic Pastel Toast Notifications

A complex, skeuomorphic, and pastel-themed toast notification component for entertainment/media platforms, featuring multiple notification types with dark mode support and responsive design.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen flex items-start justify-center dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 font-sans">
  <div class="w-full max-w-md space-y-4 sm:space-y-6">

    <!-- Success Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-green-200 to-green-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-green-700 dark:to-green-800 dark:shadow-[0_4px_15px_rgba(0,255,0,0.3)] dark:border dark:border-green-600 border border-green-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-inner-lg shadow-green-700/50 dark:bg-green-600 dark:shadow-green-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-green-800 dark:text-green-200 drop-shadow-sm">Download Complete</p>
        <p class="text-sm text-green-700 dark:text-green-300">Your movie 'The Abyss' is ready to watch!</p>
        <div class="mt-2 text-xs text-green-600 dark:text-green-400">Just now</div>
        <div class="absolute bottom-2 right-2 text-xs text-green-600/70 dark:text-green-400/70 font-mono">ID: #2023-A001</div>
      </div>
      <button aria-label="Close success notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-green-400/70 hover:bg-green-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-green-600/70 dark:hover:bg-green-700/80">
        <svg class="w-5 h-5 text-green-800 dark:text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Warning Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-yellow-200 to-yellow-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-yellow-700 dark:to-yellow-800 dark:shadow-[0_4px_15px_rgba(255,255,0,0.3)] dark:border dark:border-yellow-600 border border-yellow-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center shadow-inner-lg shadow-yellow-700/50 dark:bg-yellow-600 dark:shadow-yellow-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-yellow-800 dark:text-yellow-200 drop-shadow-sm">Parental Advisory</p>
        <p class="text-sm text-yellow-700 dark:text-yellow-300">Content not suitable for all ages. Viewer discretion advised.</p>
        <div class="mt-2 text-xs text-yellow-600 dark:text-yellow-400">1 minute ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-yellow-600/70 dark:text-yellow-400/70 font-mono">ID: #2023-B002</div>
      </div>
      <button aria-label="Close warning notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-yellow-400/70 hover:bg-yellow-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-yellow-600/70 dark:hover:bg-yellow-700/80">
        <svg class="w-5 h-5 text-yellow-800 dark:text-yellow-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Error Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-red-200 to-red-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-red-700 dark:to-red-800 dark:shadow-[0_4px_15px_rgba(255,0,0,0.3)] dark:border dark:border-red-600 border border-red-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 flex items-center justify-center shadow-inner-lg shadow-red-700/50 dark:bg-red-600 dark:shadow-red-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-red-800 dark:text-red-200 drop-shadow-sm">Playback Error</p>
        <p class="text-sm text-red-700 dark:text-red-300">Cannot play 'Episode 3': License expired (Error 403).</p>
        <div class="mt-2 text-xs text-red-600 dark:text-red-400">5 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-red-600/70 dark:text-red-400/70 font-mono">ID: #2023-C003</div>
      </div>
      <button aria-label="Close error notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-red-400/70 hover:bg-red-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-red-600/70 dark:hover:bg-red-700/80">
        <svg class="w-5 h-5 text-red-800 dark:text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Info Notification with Avatar/Image -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-blue-200 to-blue-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-blue-700 dark:to-blue-800 dark:shadow-[0_4px_15px_rgba(0,0,255,0.3)] dark:border dark:border-blue-600 border border-blue-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-blue-500 flex items-center justify-center shadow-inner-lg shadow-blue-700/50 dark:bg-blue-600 dark:shadow-blue-900/50">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="object-cover w-full h-full border-2 border-blue-400 dark:border-blue-500"/>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-blue-800 dark:text-blue-200 drop-shadow-sm">New Follower!</p>
        <p class="text-sm text-blue-700 dark:text-blue-300">John Doe just followed your 'Gaming Stream' channel.</p>
        <div class="mt-2 text-xs text-blue-600 dark:text-blue-400">15 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-blue-600/70 dark:text-blue-400/70 font-mono">ID: #2023-D004</div>
      </div>
      <button aria-label="Close information notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-blue-400/70 hover:bg-blue-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-blue-600/70 dark:hover:bg-blue-700/80">
        <svg class="w-5 h-5 text-blue-800 dark:text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Custom Action/Engagement Notification -->
    <div class="relative flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-2xl bg-gradient-to-br from-purple-200 to-pink-200 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-purple-700 dark:to-pink-700 dark:shadow-[0_4px_15px_rgba(200,0,200,0.3)] dark:border dark:border-purple-600 border border-purple-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-white flex items-center justify-center shadow-inner-lg shadow-purple-700/50 dark:bg-purple-900 dark:shadow-purple-900/50">
        <img src="https://picsum.photos/id/104/50/50" alt="Content thumbnail" class="object-cover w-full h-full border-2 border-purple-400 dark:border-purple-500"/>
      </div>
      <div class="mt-4 sm:mt-0 sm:ml-4 flex-1">
        <p class="text-lg font-bold text-purple-800 dark:text-purple-200 drop-shadow-sm">New Release!</p>
        <p class="text-sm text-purple-700 dark:text-purple-300">'The Future's Calling' S02E01 is now available to stream.</p>
        <div class="mt-3 flex flex-col sm:flex-row sm:space-x-3 space-y-2 sm:space-y-0 text-right">
          <button class="flex-1 px-4 py-2 rounded-xl bg-purple-400 hover:bg-purple-500 text-white font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-purple-600 dark:hover:bg-purple-700 dark:shadow-[0_2px_8px_rgba(150,0,150,0.5)]">
            Watch Now
          </button>
          <button class="flex-1 px-4 py-2 rounded-xl bg-pink-300 hover:bg-pink-400 text-pink-800 font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-100 dark:shadow-[0_2px_8px_rgba(200,0,150,0.5)]">
            Add to Watchlist
          </button>
        </div>
      </div>
      <button aria-label="Close new release notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-opacity-70 bg-purple-300 hover:bg-purple-400 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-purple-600/70 dark:hover:bg-purple-700/80">
        <svg class="w-5 h-5 text-purple-800 dark:text-purple-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

  </div>
</div>

<style>
  /* Adding a subtle inset shadow for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2), inset 0px -2px 5px rgba(255, 255, 255, 0.5);
  }

  .dark .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.7), inset 0px -2px 5px rgba(25, 25, 25, 0.2);
  }

  /* Drop shadow for text for better blending with skeuomorphic elements */
  .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .dark .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  }
</style>

Toast Notifications Component

A set of toast notifications designed with a clean, minimalist Swiss/International Typography style, featuring an analogous color scheme. Optimized for photography-related websites, providing clear and concise feedback to users. Includes responsive design and dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm overflow-hidden p-2 sm:max-w-md">
    
    <!-- Success Toast -->
    <div class="mb-3 flex items-center rounded-lg bg-green-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-green-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Success</h3>
            <p class="mt-1 text-xs sm:text-sm">Photo 'Parisian Sunset.jpg' uploaded successfully.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <!-- Warning Toast -->
    <div class="mb-3 flex items-center rounded-lg bg-orange-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-orange-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0L14.803 12c.765 1.36-.2 3-1.743 3H6.94c-1.543 0-2.508-1.64-1.743-3L8.257 3.099zM10 10a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Warning</h3>
            <p class="mt-1 text-xs sm:text-sm">Some images may exceed recommended resolution for web.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <!-- Error Toast -->
    <div class="flex items-center rounded-lg bg-red-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-red-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Error</h3>
            <p class="mt-1 text-xs sm:text-sm">Failed to connect to image server. Please try again.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>
</div>

Glassmorphism Toast Notifications Component

A responsive toast notification component with a glassmorphism design, pastel color scheme, and dark mode support, suitable for booking and reservation systems.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 p-4 dark:from-gray-900 dark:to-black sm:p-6 lg:p-8">
  <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080?blur=5&grayscale'); background-attachment: fixed;"></div>
  
  <div class="relative z-10 flex flex-col items-center justify-center p-4">

    <!-- Toast Notifications Container (example, these would typically be inserted dynamically) -->
    <div class="space-y-4 w-full max-w-sm">

      <!-- Success Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 18 01-9 9 9 9 01-9-9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Success! Your reservation is confirmed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">See you on <strong>2024-08-15 at 10:00 AM</strong> for your 'Dental Check-up'.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              View Details
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Dismiss
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Info Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Reminder: Booking details updated.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Your reservation for 'Yoga Class' at <strong>11:00 AM (changed from 10:30 AM)</strong> on August 10th has been adjusted.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800 focus:ring-green-500">
              Acknowledge
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Call Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Warning Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Heads Up! Slot for 'Haircut' is limited.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Only <strong>2 slots remaining</strong> on <strong>2024-08-20</strong>. Book now to secure your spot!</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800 focus:ring-red-500">
              Book Now
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Check Calendar
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Error Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Error: Reservation failed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">The requested time slot for <strong>'Consultation'</strong> on <strong>2024-08-18</strong> is no longer available.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              Find Another Time
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Contact Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

    </div>
  </div>
</div>

Toast Notifications Component

A clean, minimalist toast notification component with Swiss/International Typography style, purple/violet color scheme, designed for booking/reservation systems. Fully responsive with dark mode support.

Open Preview

                <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>

Search Components

Categories

Toast Notifications