Componente de barra de progreso 3D
Un componente de barra de progreso receptivo diseñado para interfaces de redes sociales, con un efecto 3D, esquema de color monocromático y compatibilidad con modo oscuro, creado con Tailwind CSS.
Código HTML
<div class="flex flex-col items-center py-10">
<div class="w-full max-w-md">
<div class="flex justify-between mb-2">
<span class="text-gray-700 dark:text-gray-300">Progress</span>
<span class="text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
</div>
<div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>Componentes relacionados
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.
Barra de progreso neumórfica
Un componente de barra de progreso responsivo diseñado con el estilo Neumorphism, que admite temas claros y oscuros mediante Tailwind CSS.
Componente de la barra de progreso
Un componente simple de la barra de progreso con estilo de vidrio y colores monocromáticos, adecuado para sitios web comerciales y corporativos, con soporte para el modo oscuro.