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
Indicateurs de progression inspirés du papier/de l’impression pour une place de marché, avec des couleurs bonbons/sucrées. Conception complexe avec plusieurs étapes, mise en page réactive et prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateur de progression simple et réactif avec des effets néon/lumineux et des tons de bijoux, adapté aux sites de conseil/de services. Inclut la prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.