Componente de notificaciones del sistema
Un componente de notificaciones de tostadas de estilo brutalista que utiliza Tailwind CSS, diseñado para una cartera que muestra trabajos o productos. El diseño incorpora un esquema de color análogo y admite el modo oscuro con una interfaz compleja.
Código HTML
<div class="fixed top-4 right-4 z-50 space-y-4">
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Notification Title</h2>
<p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
</div>
<button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Another Notification</h2>
<p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
</div>
<button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Success Notification</h2>
<p class="text-sm">Your latest action was successful. Keep up the great work!</p>
</div>
<button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificación del sistema con capacidad de respuesta con diseño skeuomórfico y compatibilidad con el modo oscuro, creado con Tailwind CSS.
Retro_Vintage_Pastel_Finance_Toast_Notifications
Un componente de notificaciones de tostadas complejo y receptivo con una estética retro / vintage, combinación de colores pastel, diseñado para interfaces financieras / bancarias. Incluye soporte para modo oscuro y múltiples tipos de notificaciones.
Notificaciones del sistema
Un componente de notificaciones del sistema receptivo y compatible con temas oscuros para comercio electrónico con un diseño minimalista / plano que utiliza un esquema de color complementario.