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.
Codice HTML
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
<div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
<span>0%</span>
<span>70%</span>
<span>100%</span>
</div>
<div class="mt-4">
<img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md">
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
</div>
</div>Componenti correlati
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.
Indicatore
Componente della barra di avanzamento con progettazione di microinterazioni. Include effetti reattivi e supporto per temi scuri utilizzando solo HTML e CSS (Tailwind CSS).
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.