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.
HTML Code
<div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-blue-500 dark:text-blue-400">January 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-red-500 dark:text-red-400">March 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-green-500 dark:text-green-400">May 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-purple-500 dark:text-purple-400">August 2022</span>
</div>
</div>
</div>Composants associés
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 réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il affiche une série d’événements avec des dates, des titres et des descriptions, adaptés à un tableau de bord.
Composant de chronologie
Un composant de chronologie réactif conçu dans un design minimaliste/plat pour le commerce électronique, prenant en charge le mode sombre avec une palette de couleurs analogue et plusieurs éléments interactifs.