Componente Indicatori di progresso
Un semplice indicatore di avanzamento progettato con un effetto glassmorphism, adatto per siti di e-commerce con supporto alla modalità scura e una combinazione di colori monocromatica.
Codice HTML
<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>Componenti correlati
Componente Indicatori di progresso
Un indicatore di avanzamento in stile neumorfico adatto per le interfacce dei social media, caratterizzato da un layout semplice e un design reattivo con supporto per la modalità scura.
Indicatori di progresso Componente 33
Un indicatore di avanzamento reattivo con microinterazioni in Tailwind CSS, con supporto per il tema scuro.
Componente Indicatori di progresso
Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.