Barra di avanzamento del neumorfismo
Componente della barra di avanzamento con design del neumorfismo, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS
Codice HTML
<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
</div>
</div>
</div>
<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
<div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
</div>
</div>
</div>Componenti correlati
Barra di avanzamento del Glassmorphism
Barra di avanzamento in stile Glassmorphism progettata per le interfacce dei social media, con colori vivaci e supporto per la modalità scura. Layout semplice senza JavaScript.
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.
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato in stile Material Design, che incorpora combinazioni di colori pastello per le vetrine del portfolio. Supporta la modalità oscura.