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 komplexe, reaktionsschnelle Timeline-Komponente, die für Bildungsplattformen entwickelt wurde und ein klares, minimalistisches, auf Typografie ausgerichtetes Design mit Erdtönen und vollständiger Unterstützung des Dunkelmodus bietet.

Offen

Retro-Zeitleiste

Eine einfache Retro-/Vintage-Timeline-Komponente mit Tailwind CSS, die für Portfolios entwickelt wurde. Es verfügt über ein reaktionsschnelles Layout und Unterstützung für den Dunkelmodus mit Komplementärfarben.

Offen

Social-Media-Timeline-Komponente

Eine einfache, reaktionsschnelle Timeline-Komponente für Social Media, die nach den Prinzipien des Material Designs entwickelt wurde. Es verwendet Erdtöne und unterstützt den Dunkelmodus. Jedes Timeline-Element zeigt einen Benutzer-Avatar, einen Namen, einen Beitragstitel und ein Platzhalterbild an, wie es für Social-Media-Feeds typisch ist.

Offen