Componente Barra di avanzamento 3D
Un componente della barra di avanzamento reattivo progettato per le interfacce di social networking, con un effetto 3D, una combinazione di colori monocromatica e il supporto della modalità scura, creato utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center py-10">
<div class="w-full max-w-md">
<div class="flex justify-between mb-2">
<span class="text-gray-700 dark:text-gray-300">Progress</span>
<span class="text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
</div>
<div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>Componenti correlati
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.
Skeuomorphic_Monochromatic_Progress_Bar
Un componente della barra di avanzamento skeumorfica di complessità moderata per l'e-commerce, con una combinazione di colori monocromatica, piena reattività e supporto per la modalità scura.
Barra di avanzamento triadica minimalista
Una barra di avanzamento minimalista e reattiva con combinazione di colori triadica e supporto per temi scuri, adatta per applicazioni di social media.