Componente Indicatori di progresso
Un semplice componente Progress Indicators ispirato all'estetica retrò/vintage degli anni '80 e '90, che utilizza una combinazione di colori complementari. Progettato per le interfacce dei social media e reattivo con supporto per il tema scuro.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
<div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
<span>0%</span>
<span>70%</span>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-md text-white">User Name</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
</div>
</div>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>Componenti correlati
BrutalistaScala di grigiBarra di progresso
Una barra di avanzamento in scala di grigi in stile brutalista per i contenuti del blog, con un design semplice, supporto per la modalità oscura e reattività.
Indicatori di progresso Componente 33
Un indicatore di avanzamento reattivo con microinterazioni in Tailwind CSS, con supporto per il tema scuro.
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.