Barra di avanzamento della modalità oscura
Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, con un design elegante e il supporto per il tema scuro.
Codice HTML
<div class="bg-gray-800 rounded-lg p-4 w-full">
<h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-teal-600">
Completed
</span>
</div>
</div>
<div class="flex h-2 mb-4 rounded bg-gray-700">
<div class="w-7/12 h-full bg-teal-600 rounded"></div>
</div>
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
<span class="text-white text-sm">John Doe</span>
</div>
</div>Componenti correlati
Barra di avanzamento del neumorfismo
Un componente della barra di avanzamento in stile neumorfismo reattivo progettato per i dashboard, che incorpora una funzione interattiva e supporta la modalità oscura.
Barra di avanzamento professionale per l'e-commerce
Un componente della barra di avanzamento complesso e reattivo progettato per l'e-commerce, con una combinazione di colori autunnali (arancioni, marroni, bordeaux) e che supporta la modalità scura. Fornisce un aspetto pulito e professionale per gli ambienti aziendali.
Componente della barra di avanzamento della modalità scura
Un componente reattivo della barra di avanzamento in modalità oscura per siti Web aziendali/aziendali, che utilizza colori vivaci ed elementi interattivi.