CCHub Logo CCHub Tailwind Collection
Komponenten Zeitstrahl Zeitleisten-Komponente

Zeitleisten-Komponente

Eine reaktionsschnelle Timeline-Komponente, die im Brutalismus-Stil mit Tailwind CSS gestaltet wurde, ein dunkles Design unterstützt und Platzhalterbilder und Avatare enthält.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
  <h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Timeline</h1>
  <div class="border-l-4 border-gray-300 dark:border-gray-700">
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">John Doe</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-01</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Jane Smith</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-05</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Alice Johnson</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        <img src="https://picsum.photos/200/100?random=3" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-10</span>
    </div>
  </div>
</div>

Verwandte Komponenten

Zeitleisten-Komponente

Eine responsive Timeline-Komponente in einem minimalistischen/flachen Design für den E-Commerce, die den Dunkelmodus mit einem analogen Farbschema und mehreren interaktiven Elementen unterstützt.

Offen

Zeitleisten-Komponente

Eine responsive Timeline-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es zeigt eine Reihe von Ereignissen mit Datumsangaben, Titeln und Beschreibungen an, die für ein Dashboard geeignet sind.

Offen

Zeitleisten-Komponente

Eine reaktionsschnelle Zeitleistenkomponente für Dashboards mit Mikrointeraktionen und einem pastellfarbenen Farbschema mit Unterstützung für dunkle Themen. Es verwendet Tailwind CSS für das Styling und enthält Platzhalterbilder von picsum.photos und Avatare von randomuser.me.

Offen