Componente Notifiche
Un componente di notifiche complesso e reattivo progettato con i principi di Material Design, colori neutri freddi e supporto per la modalità scura, adatto a un portfolio per mostrare elementi interattivi ed effetti di profondità.
Codice HTML
<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>Componenti correlati
Componente Notifiche
Un componente di notifiche reattivo con microinterazioni, combinazione di colori triadica e supporto per temi scuri, progettato per mostrare lavori o prodotti.
Componente Notifiche
Componente Notifiche in stile Skeuomorphism con design reattivo e supporto per temi scuri. Questo componente presenta un aspetto realistico e in rilievo per le notifiche, incluso un sottile effetto ombra e bagliore. È completamente reattivo e include stili distinti per la modalità scura, garantendo leggibilità e appeal estetico in tutte le condizioni di illuminazione. Utilizza immagini segnaposto per gli avatar.
Componente Notifiche
Un componente di notifiche reattivo con stile Material Design, combinazione di colori complementari e supporto per la modalità oscura, costruito con Tailwind CSS per uno scopo di dashboard.