Volet Indicateurs de progrès
Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
<div class="w-full mx-auto">
<!-- Progress Bar -->
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
1. Add to Cart
</div>
<div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
2. Checkout
</div>
<div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
3. Payment
</div>
</div>
<div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
<div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
</div>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.
Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Composant d’indicateurs de progression réactif conçu pour un tableau de bord d’interface utilisateur en mode sombre avec un schéma de couleurs analogue. Il comprend divers indicateurs de progression tels que des barres, des cercles et un flux d’activité, le tout stylisé avec Tailwind CSS pour la prise en charge du mode sombre. Aucun JavaScript n’est utilisé.