Componente Indicatori di progresso
Un componente reattivo degli indicatori di avanzamento con stile glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura, che supporta il tema scuro utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
<span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
<span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
<span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
</div>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.
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.
Componente Indicatori di progresso
Si tratta di un componente indicatore di avanzamento in stile Material Design che utilizza Tailwind CSS, con effetti reattivi e supporto per temi scuri.