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
Barra de progreso Gradient Rainbow para fotografía
Un componente de barra de progreso complejo y receptivo para portafolios de fotografía, con un diseño de arco iris degradado multicolor y compatibilidad con el modo oscuro. Ideal para mostrar la carga de fotos o la progresión de la galería.
Componente de la barra de progreso
Un componente simple de la barra de progreso con un diseño brutalista con un esquema de color en escala de grises para aplicaciones de comercio electrónico. Es responsivo y cuenta con soporte para modo oscuro.
Barra de progreso minimalista
Un componente de barra de progreso de diseño minimalista y plano con colores pastel, adecuado para sitios web profesionales de negocios o corporativos. Tiene un diseño responsivo y admite el modo oscuro usando Tailwind CSS.