Composant Notifications
Un composant de notifications complexe et réactif conçu avec les principes de Material Design, des couleurs neutres froides et la prise en charge du mode sombre, adapté à un portfolio pour présenter des éléments interactifs et des effets de profondeur.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
Mark all as read
</button>
<button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
</button>
</div>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Notification Item 1 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
"Great insights! I particularly liked your point about the new design trends..."
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
</div>
</div>
</div>
<!-- Notification Item 2 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
Congratulations! Your project is now live and visible to the community.
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
</div>
</div>
</div>
<!-- Notification Item 3 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
"Hi! I saw your work on the Material Design component and wanted to ask about..."
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
</div>
</div>
</div>
<!-- Notification Item 4 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
Please check the console for more details. This might affect the display of your project.
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
</div>
</div>
</div>
<!-- Notification Item 5 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
We've added new collaboration tools and improved performance. Update now to experience!
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Memphis_Gaming_Notification_Simple_Forest_Green
Un composant de notification de jeu simple et réactif avec une influence du design de Memphis utilisant une palette de couleurs vert forêt, y compris la prise en charge du mode sombre.
Composant Notifications
Un composant de notifications réactif avec un style Material Design, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu avec Tailwind CSS à des fins de tableau de bord.
Composant Notifications
Composant de notifications réactives avec prise en charge du mode sombre pour les interfaces de médias sociaux, avec une palette de couleurs vives.