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
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, adatto per le moderne applicazioni web.
Barra di avanzamento del neumorfismo
Una barra di avanzamento in stile neumorfismo per i portfolio, con una combinazione di colori pastello, complessità moderata, reattività e supporto per temi scuri. Non è incluso alcun JavaScript; il componente è costruito con HTML e Tailwind CSS.
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.