Componentes Notificaciones Componente de notificaciones

Componente de notificaciones

Un componente de notificaciones de estilo retro/vintage diseñado para paneles, con múltiples elementos interactivos y soporte para temas oscuros.

Vista previa

Código HTML

<div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
    <div class="space-y-4">
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">John Doe</p>
                <p class="text-gray-300">You have a new message. Check it out!</p>
                <span class="text-sm text-gray-500">2 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Jane Smith</p>
                <p class="text-gray-300">Your report has been approved.</p>
                <span class="text-sm text-gray-500">15 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Chris Johnson</p>
                <p class="text-gray-300">New comment on your post.</p>
                <span class="text-sm text-gray-500">30 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Anna Taylor</p>
                <p class="text-gray-300">Don't forget to review your tasks.</p>
                <span class="text-sm text-gray-500">1 hour ago</span>
            </div>
        </div>
    </div>
    <a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>

Componentes relacionados

Componente de notificaciones

Un componente de notificaciones skeuomórfico para comercio electrónico con una combinación de colores vibrantes, una interfaz compleja, un diseño receptivo y compatibilidad con temas oscuros, creado con Tailwind CSS.

Abrir

Componente de notificaciones

Un componente de notificaciones retro/vintage diseñado con tonos tierra e interacciones complejas para mostrar el trabajo del portafolio.

Abrir

Brutalist_Industrial_Notifications_Component

Un componente de notificaciones complejo de estilo brutalista para aplicaciones industriales y de fabricación, con una combinación de colores cálidos/atardeceres, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir