Componentes Notificaciones Componente de notificaciones

Componente de notificaciones

Un componente de notificaciones responsivo diseñado con elementos esqueuomórficos, que utiliza un esquema de color complementario y un diseño simple adecuado para un portafolio.

Vista previa

Código HTML

<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
    <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
            <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
            <button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
        </div>
    </div>
</div>

Componentes relacionados

Componente de notificaciones

Un componente de notificaciones responsivo diseñado en modo oscuro usando Tailwind CSS.

Abrir

Componente de notificaciones

Un componente de notificaciones con un diseño de cristal con un esquema de color monocromático, adaptado para aplicaciones web empresariales/corporativas. El componente incluye varios elementos interactivos y es compatible con el modo oscuro.

Abrir

Componente de notificaciones minimalista (escala de grises)

Un componente de notificaciones simple y minimalista en escala de grises para carteras, con soporte de modo responsivo y oscuro usando Tailwind CSS. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir