Barra de progreso del modo oscuro
Un componente de barra de progreso receptivo diseñado para el modo oscuro usando Tailwind CSS, con un diseño elegante y soporte para temas oscuros.
Código HTML
<div class="bg-gray-800 rounded-lg p-4 w-full">
<h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-teal-600">
Completed
</span>
</div>
</div>
<div class="flex h-2 mb-4 rounded bg-gray-700">
<div class="w-7/12 h-full bg-teal-600 rounded"></div>
</div>
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
<span class="text-white text-sm">John Doe</span>
</div>
</div>Componentes relacionados
Componente de la barra de progreso de la Bauhaus
Un componente de barra de progreso de complejidad moderada, receptivo e inspirado en la Bauhaus adecuado para plataformas de entretenimiento/medios, con neutros fríos y 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.
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.