Composant de chronologie
Un composant de chronologie minimaliste conçu pour la consommation de blogs et de contenu, avec des couleurs de terre et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
<div class="relative">
<div class="border-l border-gray-300 dark:border-gray-700 ml-6">
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Playful_Music_Timeline_Component
Un composant de chronologie ludique et amusant conçu pour les plateformes musicales et audio, avec des tons de bijoux vifs, des éléments arrondis et une mise en page réactive avec prise en charge du mode sombre. Affiche les événements audio ou les pistes au fil du temps.
Composant de chronologie skeuomorphe
Un composant de chronologie skeuomorphe avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS. Pas besoin de JavaScript, seulement HTML et CSS.
Composant de chronologie
Un composant de chronologie réactif avec une palette de couleurs bonbon/doux, des transitions de dégradé et la prise en charge du mode sombre, adapté à la présentation de travaux ou de produits dans un portfolio. Comprend plusieurs événements chronologiques.