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 Indicadores de Progreso
Un componente de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.
Indicadores de Progreso Componente 33
Un indicador de progreso responsivo con microinteracciones en Tailwind CSS, con soporte para temas oscuros.
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.