Composant de chronologie
Composant de chronologie réactif avec design skeuomorphe, schéma de couleurs analogue, complexité modérée pour les sites Web de blog/contenu avec prise en charge du thème sombre. Aucun JavaScript n’est nécessaire, utilise Tailwind CSS avec prise en charge du mode sombre. Des images de picsum.photos et des avatars de randomuser.me sont utilisés.
HTML Code
<section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<div class="container mx-auto px-4 py-8 relative">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Timeline Title</h2>
<p class="text-sm">A brief description of this timeline event.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
<h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
</div>
</div>
<div class="border-l-4 border-green-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
<div class="relative">
<img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Another Title</h2>
<p class="text-sm">Related image description.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Final Event</h2>
<p class="text-sm">Concluding event details.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
</div>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</section>
Composants associés
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.
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.
Composant de chronologie
Un composant de chronologie réactif pour les tableaux de bord, avec des micro-interactions et une palette de couleurs pastel, avec prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et inclut des images de substitution de picsum.photos et des avatars de randomuser.me.