Componente de Indicadores de Progreso
Un indicador de progreso de estilo neumórfico adecuado para interfaces de redes sociales, con un diseño simple y un diseño receptivo con soporte para modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-6">
<div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
<h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
<div class="my-4">
<div class="flex justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
<span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
<span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>
</div>Componentes relacionados
Componente de barra de progreso 3D
Diseñado con efectos 3D, Tailwind CSS, diseño responsivo y compatibilidad con modo oscuro.
Componente de Indicadores de Progreso
Un simple componente de Indicadores de Progreso inspirado en la estética retro/vintage de los años 80 y 90, utilizando una combinación de colores complementaria. Diseñado para interfaces de redes sociales y responsivo con soporte para temas oscuros.
BrutalistaEscala de grisesBarra de progreso
Una barra de progreso en escala de grises de estilo brutalista para el contenido del blog, con un diseño simple, compatibilidad con el modo oscuro y capacidad de respuesta.