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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Our Journey</h2>
<div class="relative mb-12">
<div class="absolute w-1 bg-gray-300 dark:bg-gray-600 h-full left-1/2 transform -translate-x-1/2"></div>
<div class="flex items-start mb-8">
<div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 1: Browse Products</h3>
<p class="text-gray-700 dark:text-gray-400">Explore our wide range of products and find what you love.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">January 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 2: Add to Cart</h3>
<p class="text-gray-700 dark:text-gray-400">Add your favorite items to your shopping cart.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">February 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 3: Checkout</h3>
<p class="text-gray-700 dark:text-gray-400">Proceed to checkout and complete your purchase.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">March 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 4: Order Confirmation</h3>
<p class="text-gray-700 dark:text-gray-400">Receive confirmation of your order via email.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">April 2023</span>
</div>
</div>
</div>
<a href="#" class="inline-block bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800">Shop Now</a>
</div>Composants associés
Composant de chronologie de neumorphisme
Un composant de chronologie réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du mode sombre.
Composant Chronologie de jeu
Un composant de chronologie simple, dynamique et réactif avec un design 3D subtil optimisé pour les sites Web de jeux, avec prise en charge du mode sombre.
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.