Zeitleisten-Komponente
Eine minimalistische/flache Design-Zeitleistenkomponente zur Präsentation von Arbeiten oder Produkten in einem Portfolio, die mit Reaktionsfähigkeit und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS entwickelt wurde.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-900 p-6">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">My Portfolio Timeline</h2>
<div class="relative">
<div class="flex flex-col">
<!-- Timeline Item 1 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
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.
Skeuomorphe Zeitachsenkomponente
Eine Skeuomorphic Timeline Component mit responsiven Effekten und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Kein JavaScript erforderlich, nur HTML und CSS.
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.