Componente de la barra de progreso
Un componente de barra de progreso responsivo diseñado teniendo en cuenta el modo oscuro, utilizando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
<span class="text-xs font-semibold inline-block text-gray-400">
7/10
</span>
</div>
<div class="h-2 bg-gray-700 rounded">
<div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
</div>
</div>
<p class="text-gray-400 text-sm mt-2">Loading...</p>
</div>
</div>Componentes relacionados
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
Barra de progreso de Glassmorphism
Barra de progreso de estilo glassmorphism diseñada para interfaces de redes sociales, con colores vibrantes y compatibilidad con el modo oscuro. Diseño simple sin JavaScript.
Barra de progreso de neumorfismo
Una barra de progreso de estilo Neumorphism para portafolios, con una combinación de colores pastel, complejidad moderada, capacidad de respuesta y compatibilidad con temas oscuros. No se incluye JavaScript; el componente está construido con HTML y Tailwind CSS.