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 reaktionsschnelle Aktivitäts-Feed-Komponente mit einem vom Bauhaus inspirierten Design mit Schwarz-Weiß-Monochome mit einem primären Farbakzent, geeignet für Technologie-/SaaS-Anwendungen. Inklusive Unterstützung für den Dunkelmodus.

Offen

Komponente "Aktivitätsfeed"

Brutalistische Aktivitäts-Feed-Komponente für Business-/Corporate-Websites mit analogem Farbschema, mäßiger Komplexität, responsivem Design und Unterstützung für dunkle Themen.

Offen

Komponente "Aktivitätsfeed"

Responsive Activity Feed-Komponente für Blog/Inhalte mit einfachem 3D-Design, Pastellfarbschema, Unterstützung für dunkle Themen und Rückenwind-CSS.

Offen