Komponenten suchen

Kategorien

Komponenten Aktivitäts-Feed

Aktivitäts-Feed

Strom von Benutzer- oder Systemaktivitäten

Brutalistischer monochromatischer Aktivitätsfeed

Eine einfache, brutalistisch inspirierte Aktivitäts-Feed-Komponente mit einem monochromen Farbschema, die sich für Geschäfts-/Unternehmenswebsites eignet. Verfügt über hohen Kontrast, fette Typografie und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen Vorschau

                <div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
    <div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
      <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
        Activity <br class="sm:hidden"/>Feed
      </h2>

      <div class="space-y-6 sm:space-y-8 lg:space-y-10">
        <!-- Activity Item 1: New Project -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 2: Task Update -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 3: File Upload -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
  </div>
</div>

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 Vorschau

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>

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 Vorschau

                <!-- Activity Feed Component: Retro/Vintage Monochromatic Style -->
<section aria-labelledby="activity-feed-title" class="bg-blue-50 dark:bg-blue-900 border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg shadow p-6 max-w-md md:max-w-lg lg:max-w-xl mx-auto">
  <h2 id="activity-feed-title" class="uppercase tracking-widest text-2xl font-mono text-blue-900 dark:text-blue-100 pb-2 mb-4 border-b-2 border-dashed border-blue-300 dark:border-blue-700">
    Activity Feed
  </h2>
  <div class="divide-y divide-blue-200 dark:divide-blue-700">
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Alice</span> published a new post <a href="#" class="underline">Understanding Tailwind CSS</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Bob avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Bob</span> commented on <a href="#" class="underline">10 CSS Tricks You Should Know</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">5 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Carol avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Carol</span> liked the post <a href="#" class="underline">Building Responsive Layouts</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">1 day ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dave avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Dave</span> published a new post <a href="#" class="underline">A Retro Design Revival</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 days ago</p>
      </div>
    </div>
  </div>
</section>

Komponente "Aktivitätsfeed"

Aktivitäts-Feed-Komponente mit Retro-/Vintage-Ästhetik der 80er/90er Jahre, monochromatischem Farbschema, mäßiger Komplexität für den Konsum von Blogs / Inhalten. Responsives Design mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Bilder von picsum.photos und Avatare von randomuser.me.

Offen Vorschau

                <div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>2 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>4 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>6 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
    </div>
  </div>
</div>

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 Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
                <p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
            </div>
        </div>
    </div>
</div>

Komponente "Aktivitätsfeed"

Aktivitätsfeed-Komponente mit Glassmorphism-Stil, lebendigem Farbschema, mittlerer Komplexität und reaktionsschneller Unterstützung für dunkles Design.

Offen Vorschau

                <div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
    <div class="max-w-xl mx-auto">
        <div class="relative">
            <span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
                <span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
            </span>

            <ul class="relative">
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

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 Vorschau

                <section class="bg-gray-100 dark:bg-gray-900 py-8 lg:py-16 antialiased">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Activity Feed</h2>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
      <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">John Doe posted a new article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">Read more</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
        <div class="absolute inset-0 border-2 border-pink-300 dark:border-pink-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Jane Smith commented on a post</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View comment</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg relative">
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Peter Jones liked an article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View article</a>
    </article>

  </div>
</section>

Komponente "Aktivitätsfeed"

Minimalistischer/flacher Design-Aktivitätsfeed für E-Commerce, monochromatisch, einfach, reaktionsschnell, dunkles Thema

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

Komponente "Aktivitätsfeed"

Eine Aktivitäts-Feed-Komponente im Retro-/Vintage-Stil, die für die Präsentation von Arbeiten oder Produkten mit hoher Sättigungsfarbe, interaktiven Elementen und Unterstützung für den Dunkelmodus entwickelt wurde.

Offen Vorschau

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
    <div class="space-y-4">
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
                <p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah 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">4 days ago</p>
            </div>
        </div>
    </div>
    <button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>

Komponente "Aktivitätsfeed"

Eine komplexe Aktivitätsfeed-Komponente, die entwickelt wurde, um Blog-Inhalte mit mehreren interaktiven Elementen zu präsentieren. Enthält einen 3D-Designstil und ein komplementäres Farbschema. Unterstützt responsives Design und dunkles Design.

Offen Vorschau

                <div class="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Activity Feed</h2>
    <div class="space-y-6">
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-green-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 2 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Exploring Tailwind CSS</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Join me as we dive into the world of Tailwind CSS, a utility-first CSS framework.</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-green-500">Like</button>
                <button class="hover:text-green-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 3 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Understanding CSS Grid</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">CSS Grid is an amazing layout system that allows for two-dimensional layouts.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-blue-500">Like</button>
                <button class="hover:text-blue-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-red-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Mark Johnson</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 4 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Responsive Design Basics</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Learn the fundamental principles of creating responsive web designs.</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-red-500">Like</button>
                <button class="hover:text-red-500">Comment</button>
            </div>
        </div>
    </div>
</div>