Retro_Vintage_Pastel_Finance_Toast_Notifications

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