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 komplexe Activity-Feed-Komponente für den E-Commerce mit Mikrointeraktionen und einem dunklen Theme, das mit Tailwind CSS gestaltet wurde.

Offen

Komponente "Aktivitätsfeed"

Eine Aktivitätsfeed-Komponente mit Neumorphism-Design, Erdton-Farbschema, komplexem Layout, responsivem Design und Unterstützung für dunkle Themen.

Offen

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