Componentes Fuente de actividades Componente de fuente de actividad

Componente de fuente de actividad

Un componente de alimentación de actividades receptivo con un estilo de diseño neumórfico, que admite temas claros y oscuros.

Vista previa

Código HTML

<div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <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-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <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-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente de fuente de actividad

Un componente de alimentación de actividades receptivo diseñado en un estilo inspirado en el papel/impresión con tonos sepia/marrón, adecuado para foros y plataformas comunitarias. Incluye soporte para modo oscuro.

Abrir

Componente de fuente de actividad

Componente de alimentación de actividad receptivo para blog/contenido con diseño 3D simple, combinación de colores pastel, soporte para temas oscuros y CSS de viento de cola.

Abrir

Componente de fuente de actividad

Un componente de alimentación de actividad complejo y monocromático en modo oscuro para aplicaciones de deportes/fitness, que muestra diversas interacciones, logros y actualizaciones del usuario de forma receptiva.

Abrir