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 de tostadas simple, artístico y colorido para comercio electrónico, con texturas suaves similares a la acuarela y un degradado de arco iris. Totalmente receptivo con soporte para modo oscuro.
Componente de notificaciones de Brutalism Toast
Un conjunto de notificaciones de tostadas de inspiración brutalista con una combinación de colores cálidos y neutros, adecuadas para sistemas de reservas. Presenta contrastes crudos y audaces y un diseño receptivo con soporte para modo oscuro.
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.