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
Componente de la barra de progreso
Un componente de barra de progreso responsivo diseñado teniendo en cuenta el modo oscuro, utilizando Tailwind CSS.
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado con elementos 3D, utilizando un esquema de color análogo adecuado para el comercio electrónico, con soporte para modo oscuro
Barra de progreso Earthy de Material Design
Una barra de progreso inspirada en Material Design con tonos tierra, adecuada para interfaces de redes sociales. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.