Composant de chronologie
Un composant de chronologie Minimalist/Flat Design pour présenter le travail ou les produits d’un portfolio, conçu avec une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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>Composants associés
Composant de chronologie
Un composant de chronologie réactif avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il comporte des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou.
Composant Chronologie des médias sociaux
Un composant de chronologie simple et réactif pour les médias sociaux, conçu selon les principes de Material Design. Il utilise des tons de terre et inclut la prise en charge du mode sombre. Chaque élément de la chronologie affiche un avatar utilisateur, un nom, le titre d’une publication et une image de remplacement, typique des flux de médias sociaux.
Composant de chronologie
Un composant de chronologie réactif conçu dans le style Brutalism avec Tailwind CSS, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.