Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato per la modalità scura con una combinazione di colori pastello, adatto per siti Web aziendali/aziendali.
Codice HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1 text-sm text-white">
<span>0%</span>
<span>100%</span>
</div>
<div class="h-2 bg-gray-600 rounded">
<div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-white">John Doe</span>
</div>
<span class="text-gray-400 dark:text-gray-500">In Progress</span>
</div>
</div>Componenti correlati
Barra di avanzamento del neumorfismo
Componente della barra di avanzamento con design del neumorfismo, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS
Material Design Barra di avanzamento terrosa
Una barra di avanzamento ispirata al Material Design con toni della terra, adatta per le interfacce dei social media. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.
Barra di avanzamento minimalista
Un componente della barra di avanzamento dal design minimalista e piatto con colori pastello, adatto per siti Web aziendali o aziendali professionali. Ha un design reattivo e supporta la modalità oscura utilizzando Tailwind CSS.