Componente Timeline
Un componente della timeline Minimalist/Flat Design per mostrare lavori o prodotti in un portfolio, progettato con reattività e supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente della linea temporale del neumorfismo
Un componente Timeline reattivo con stile Neumorfismo utilizzando Tailwind CSS, con supporto per la modalità scura.
Componente Timeline
Un componente della timeline reattivo con uno stile di progettazione 3D, che utilizza una combinazione di colori monocromatica, progettato per mostrare il lavoro o i prodotti di un portfolio. Include più elementi interattivi e supporta un tema scuro.
Componente della timeline dei social media - Glassmorphism
Un componente complesso e reattivo della timeline dei social media con design glassmorphism con combinazione di colori analoga, supporto per la modalità oscura ed elementi interattivi per le interfacce di social networking.