Barra de progreso de neumorfismo
Componente de barra de progreso con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
Código HTML
<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
</div>
</div>
</div>
<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
<div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
</div>
</div>
</div>Componentes relacionados
Barra de progreso de fitness deportivo en escala de grises 3D
Un complejo componente de barra de progreso en escala de grises en 3D diseñado para aplicaciones deportivas y de fitness, que muestra el progreso del entrenamiento con profundidad y compromiso visual. Incluye soporte para el modo oscuro y es totalmente responsivo.
Barra de progreso de pedidos de comercio electrónico
Un componente de barra de progreso receptivo para comercio electrónico con soporte para modo oscuro, con un diseño monocromático. Sin JavaScript, solo HTML y 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.