Componente de notificaciones
Un componente de notificaciones complejo y receptivo diseñado con los principios de Material Design, colores neutros fríos y compatibilidad con el modo oscuro, adecuado para que un portafolio muestre elementos interactivos y efectos de profundidad.
Código 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>Componentes relacionados
Componente de notificaciones
Componente de notificaciones responsivas con soporte de modo oscuro para interfaces de redes sociales, con un esquema de colores vibrantes.
Componente de notificaciones
Un componente de notificaciones de estilo Neumorphism con una combinación de colores pastel, complejidad moderada y diseño responsivo con soporte para temas oscuros. Adecuado para sitios web comerciales/corporativos.
Componente de notificaciones - Música/Audio industrial
Un componente de notificaciones responsivo con una estética industrial y cruda, colores de alto contraste y soporte para modo oscuro, adecuado para plataformas de música y audio. Cuenta con estados no leídos/leídos y elementos interactivos.