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"

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

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

Komponente "Aktivitätsfeed"

Eine organische/von der Natur inspirierte Aktivitäts-Feed-Komponente für Event- und Konferenz-Websites mit fließenden Linien, Erdtönen und reichhaltigen interaktiven Elementen. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen