Glassmorphism-Zeitachsen-Komponente
Eine responsive Timeline-Komponente im Glasmorphismus-Stil mit einem triadischen Farbschema. Es enthält glasähnliche durchscheinende Elemente mit Unschärfeeffekten, die für den Konsum von Blogs und Inhalten geeignet sind und den Dunkelmodus unterstützen.
HTML-Code
<div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
</div>
</div>
</div>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
</div>
</div>
</div>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Zeitleisten-Komponente
Eine einfache, reaktionsschnelle Timeline-Komponente mit einem monochromatischen Farbschema und subtilen 3D-Effekten, die sich für Reise-/Tourismus-Websites eignet. Enthält Unterstützung für den Dunkelmodus.
Retro/Vintage Unternehmen Zeitleiste
Responsive Retro/Vintage Timeline-Komponente mit Unterstützung des Dunkelmodus für Business-/Unternehmenswebsites
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.