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

Komponente "Aktivitätsfeed"

Eine reaktionsschnelle Aktivitäts-Feed-Komponente, die im 3D-Stil mit Unterstützung für dunkle Themen gestaltet ist und dreidimensionale Elemente für Tiefe und Engagement enthält.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

Verwandte Komponenten

Komponente "Aktivitätsfeed"

Eine einfache, reaktionsschnelle Aktivitäts-Feed-Komponente mit einer Cyberpunk-Herbst-Ästhetik mit dunklem Hintergrund, satten Orange-, Braun- und Burgundertönen, die sich für Sport-/Fitnessanwendungen eignet. Inklusive Unterstützung für den Dunkelmodus.

Offen

Komponente "Aktivitätsfeed"

Eine Aktivitäts-Feed-Komponente im Retro-/Vintage-Stil zur Präsentation von Arbeiten oder Produkten. Das Design verfügt über ein analoges Farbschema mit Unterstützung für dunkle Themen. Die Komponente ist interaktiv und reaktionsschnell und eignet sich für die Verwendung in Portfolios.

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