Componente Indicatori di progresso
Un indicatore di avanzamento in stile neumorfico adatto per le interfacce dei social media, caratterizzato da un layout semplice e un design reattivo con supporto per la modalità scura.
Codice HTML
<div class="flex flex-col items-center justify-center p-6">
<div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
<h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
<div class="my-4">
<div class="flex justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
<span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
<span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente di indicatori di progresso in stile brutalista ad alto contrasto, che mostra il lavoro o i prodotti in un portfolio. È dotato di un'interfaccia ricca con più elementi interattivi, progettata per essere reattiva con il supporto del tema scuro utilizzando Tailwind CSS.
Componente Indicatori di progresso
Un componente indicatore di avanzamento minimalista progettato per mostrare i progressi del portfolio utilizzando colori vivaci e un design reattivo con supporto per temi scuri.
Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.