CCHub Logo CCHub Tailwind Collection
Komponenten Aktivitäts-Feed Komponente "Aktivitätsfeed"

Komponente "Aktivitätsfeed"

Eine komplexe Activity-Feed-Komponente für den E-Commerce mit Mikrointeraktionen und einem dunklen Theme, das mit Tailwind CSS gestaltet wurde.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Aktivitätsfeed"

Eine Aktivitätsfeed-Komponente, die mit einer skeuomorphen Ästhetik gestaltet wurde und ein triadisches Farbschema verwendet, das für Unternehmenswebsites geeignet ist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Retro_Healthcare_Activity_Feed

Eine lebendige Retro-/Vintage-Aktivitäts-Feed-Komponente für Anwendungen im Gesundheitswesen, die im Stil der 80er/90er Jahre gestaltet wurde und Benachrichtigungen und Updates mit Unterstützung für reaktionsschnelle und dunkle Modi bietet.

Offen

Komponente "Aktivitätsfeed"

Eine komplexe, von 3D inspirierte Aktivitätsfeed-Komponente für Immobilienplattformen mit Erdtönen, responsivem Design und Unterstützung für den Dunkelmodus. Zeigt verschiedene immobilienbezogene Aktivitäten an.

Offen