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
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 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.
Chronologie des médias sociaux en niveaux de gris
Un composant de chronologie de médias sociaux réactif et prêt pour le mode sombre, construit avec Tailwind CSS. Il présente un schéma de couleurs strict en niveaux de gris et des cartes postales complexes avec des avatars d’utilisateurs, du contenu de publication (texte et images), des statistiques d’engagement et des boutons d’action. Conçu pour les interfaces de réseaux sociaux avec plusieurs éléments interactifs sur chaque publication. La conception prend en charge les arrière-plans sombres pour réduire la fatigue oculaire. Aucun JavaScript n’est utilisé.