Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado en el estilo de Material Design, que incorpora esquemas de colores pastel para exhibiciones de portafolios. Es compatible con el modo oscuro.
Código 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>Componentes relacionados
Luxury_Grayscale_Social_Media_Progress_Bar
Un componente de barra de progreso complejo, elegante y receptivo para interfaces de redes sociales, con un diseño de lujo en escala de grises con tipografía sofisticada y soporte para modo oscuro.
ProgressBarComponent
Un componente de barra de progreso simple, limpio y receptivo con colores neón/eléctricos para sitios web de comida/restaurantes, con soporte para modo oscuro y diseño de tipografía suiza/internacional.
Barra de progreso del modo oscuro triádico
Un componente de barra de progreso simple y de color triádico para el modo oscuro, adecuado para blogs y consumo de contenido. Cuenta con un diseño responsivo con Tailwind CSS, utilizando el prefijo dark: para el soporte de temas oscuros sin JavaScript.