Zeitleisten-Komponente
Eine einfache Retro-/Vintage-Timeline-Komponente, die entwickelt wurde, um Arbeiten oder Produkte mit einer nostalgischen 80er/90er-Jahre-Ästhetik zu präsentieren, wobei ein analoges Farbschema für die Unterstützung des Dunkelmodus verwendet wird.
HTML-Code
<div class="flex flex-col items-center p-4">
<h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
<div class="flex flex-col space-y-8">
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
</div>
</div>Verwandte Komponenten
Timeline-Komponente mit Glassmorphism
Timeline-Komponente im Glassmorphism-Stil, reaktionsschnell und mit Unterstützung für dunkle Themen
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.
Zeitleisten-Komponente
Eine minimalistische Flat-Design-Timeline-Komponente zur Präsentation von Arbeiten oder Produkten in einem Portfolio mit leuchtenden Farben und Unterstützung für dunkle Themen.