Componentes Notificaciones del sistema Componente de notificaciones del sistema

Componente de notificaciones del sistema

Un componente de notificaciones del sistema diseñado con el estilo Glassmorphism, con efectos responsivos y compatibilidad con temas oscuros. Utiliza Tailwind CSS para el estilo, junto con imágenes de marcador de posición de picsum.photos para las imágenes y randomuser.me para los avatares.

Vista previa

Código HTML

<div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Componentes relacionados

Notificaciones del sistema

Componente de notificaciones de tostadas de diseño minimalista / plano con esquema de color análogo, complejidad simple, para fines de cartera. Responsivo con soporte para temas oscuros.

Abrir

Componente de notificaciones del sistema

Un componente complejo de notificación del sistema de estilo glassmorphism para paneles, con elementos translúcidos, efectos de desenfoque y un esquema de color análogo. Totalmente receptivo con soporte para modo oscuro.

Abrir

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.

Abrir