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 barra de progreso 3D
Un componente de barra de progreso receptivo diseñado para interfaces de redes sociales, con un efecto 3D, esquema de color monocromático y compatibilidad con modo oscuro, creado con Tailwind CSS.
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado en el estilo de Material Design, que incorpora esquemas de colores pastel para exhibiciones de portafolios. Es compatible con el modo oscuro.
ProgressBarComponent
Un componente de barra de progreso simple, limpio y receptivo con colores neón/eléctricos para sitios web de comida/restaurantes, con soporte para modo oscuro y diseño de tipografía suiza/internacional.