Notifications de toast pastel skeuomorphique
Un composant de notification toast complexe, skeuomorphe et sur le thème pastel pour les plateformes de divertissement/médias, avec plusieurs types de notification avec prise en charge du mode sombre et conception réactive.
HTML Code
<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>Composants associés
Composant Toast Notifications
Un composant Toast Notifications de style Glassmorphism avec des couleurs pastel, conçu pour les blogs et la consommation de contenu. Il prend en charge le mode sombre et dispose d’une interface riche avec des éléments interactifs.
Composant Toast Notifications
Un composant de notification toast en mode sombre conçu pour les applications de tableau de bord, avec une palette de couleurs complémentaire avec divers éléments interactifs.
Composant Toast Notifications
Un composant de notification toast neumorphique avec des couleurs pastel, un design réactif et une prise en charge du thème sombre, adapté aux blogs et aux sites de contenu.