Composant de chronologie
Un composant de chronologie rétro/vintage simple conçu pour présenter des travaux ou des produits à l’esthétique nostalgique des années 80/90, en utilisant une palette de couleurs analogue pour la prise en charge du mode sombre.
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>Composants associés
Composant de chronologie
Un composant de chronologie réactif avec des éléments de conception 3D, une palette de couleurs de terre et une prise en charge du mode sombre. Convient aux portefeuilles.
Composant de chronologie
Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre
Composant de chronologie
Un composant de chronologie minimaliste pour présenter le travail ou les produits d’un portfolio, avec des couleurs vives et une prise en charge du thème sombre.