CCHub Logo CCHub Tailwind Collection
Composants Toast Notifications Retro_Vintage_Pastel_Finance_Toast_Notifications

Retro_Vintage_Pastel_Finance_Toast_Notifications

Un composant complexe et réactif de notifications toast avec une esthétique rétro/vintage, une palette de couleurs pastel, conçu pour les interfaces financières/bancaires. Inclut la prise en charge du mode sombre et plusieurs types de notifications.

Aperçu

HTML Code 

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

Composants associés

Composant Toast Notifications

Composant de notification toast complexe, de style glassmorphism, pour les tableaux de bord, avec des éléments translucides, des effets de flou et une palette de couleurs analogue. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir

Retro_Vintage_Toast_Notifications_Component

Un composant de notification de toast simple, sur le thème rétro/vintage, pour les outils CRM/professionnels, avec des neutres chauds, un design réactif et la prise en charge du mode sombre.

Ouvrir

Composant Notifications Toast Art Déco

Un composant de notification toast simple et contrasté avec une esthétique Art déco, adapté aux sites d’information et de journalisme. Dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir