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

Komponente "Aktivitätsfeed"

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

Vorschau

HTML-Code 

<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>

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 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

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