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

Komponente "Aktivitätsfeed"

Eine reaktionsschnelle Aktivitätsfeed-Komponente, die für die Benutzeroberfläche im Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
    <ul class="space-y-4">
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Commented on your post</p>
                <span class="text-gray-500 text-sm">2 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-gray-400">Liked your photo</p>
                <span class="text-gray-500 text-sm">4 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Sam Wilson</p>
                <p class="text-gray-400">Started following you</p>
                <span class="text-gray-500 text-sm">6 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Lisa Ray</p>
                <p class="text-gray-400">Shared your article</p>
                <span class="text-gray-500 text-sm">1 day ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Michael Brown</p>
                <p class="text-gray-400">Added a photo</p>
                <span class="text-gray-500 text-sm">2 days ago</span>
            </div>
        </li>
    </ul>
</div>

Verwandte Komponenten

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

ActivityFeed-Komponente

Eine einfache Aktivitäts-Feed-Komponente im Retro-/Vintage-Stil, die für den Konsum von Blog-Inhalten entwickelt wurde, mit einem monochromatischen blauen Farbschema und reaktionsschneller Dunkelmodus-Unterstützung mit Tailwind CSS.

Offen

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.

Offen