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.
HTML Code
<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>Composants associés
Toast Notifications
Composant Toast Notifications avec style Glassmorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
Composant Toast Notifications
Un composant de notification de toast propre et minimaliste avec un style de typographie suisse/international, une palette de couleurs violette/violette, conçu pour les systèmes de réservation. Entièrement réactif avec prise en charge du mode sombre.
Composant Toast Notifications
Un composant Toast Notifications réactif avec un style Glassmorphism et une palette de couleurs vives, adapté aux applications de commerce électronique. Il prend en charge le thème sombre et possède une interface complexe avec plusieurs éléments interactifs.