Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado para el modo oscuro con una combinación de colores pastel, adecuado para sitios web comerciales / corporativos.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1 text-sm text-white">
<span>0%</span>
<span>100%</span>
</div>
<div class="h-2 bg-gray-600 rounded">
<div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-white">John Doe</span>
</div>
<span class="text-gray-400 dark:text-gray-500">In Progress</span>
</div>
</div>Componentes relacionados
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado para el modo oscuro usando Tailwind CSS, adecuado para aplicaciones web modernas.
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.
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