Componente de Indicadores de Progreso
Un simple componente de Indicadores de Progreso inspirado en la estética retro/vintage de los años 80 y 90, utilizando una combinación de colores complementaria. Diseñado para interfaces de redes sociales y responsivo con soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
<div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
<span>0%</span>
<span>70%</span>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-md text-white">User Name</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
</div>
</div>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>Componentes relacionados
Componente de Indicadores de Progreso
Un componente de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.
Componente de Indicadores de Progreso
Un componente indicador de progreso minimalista diseñado para mostrar el progreso de la cartera utilizando colores vibrantes y un diseño receptivo con soporte para temas oscuros.
Componente de Indicadores de Progreso
Este es un componente indicador de progreso al estilo de Material Design que utiliza Tailwind CSS, con efectos responsivos y soporte para temas oscuros.