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
Zeitleisten-Komponente
Eine reaktionsschnelle Zeitleistenkomponente mit einem 3D-Designstil unter Verwendung eines monochromatischen Farbschemas, das zur Präsentation von Arbeiten oder Produkten in einem Portfolio entwickelt wurde. Es enthält mehrere interaktive Elemente und unterstützt ein dunkles Thema.
Zeitleisten-Komponente
Eine reaktionsschnelle Zeitleistenkomponente mit triadischem Farbschema, mikrointeraktionsorientiertem Design für Geschäfts-/Unternehmenswebsites, das helle und dunkle Modi unterstützt.
Retro/Vintage-Timeline-Komponente
Eine reaktionsschnelle Timeline-Komponente mit Retro-/Vintage-Design, lebendigen Farben und Unterstützung für den Dunkelmodus. Geeignet für die Präsentation eines Portfolios.