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.
HTML-Code
<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
<div class="relative w-full max-w-4xl">
<div class="border-l-4 border-indigo-600 dark:border-indigo-300">
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
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.
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.
Art-Déco-Zeitleisten-Komponente
Eine reaktionsschnelle Zeitleistenkomponente für Veranstaltungen/Konferenzen, inspiriert von der Art-Déco-Ästhetik mit einem violett-violetten Farbschema, das den Dunkelmodus unterstützt.