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 indicador de progreso simple diseñado con un efecto de morfismo de vidrio, adecuado para sitios web de comercio electrónico con soporte para modo oscuro y un esquema de color monocromático.
Componente de Indicadores de Progreso
Un componente de indicadores de progreso de estilo retro/vintage con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Memphis_Weather_Progress_Indicator
Un componente indicador de progreso meteorológico con un estilo de diseño de Memphis, con blanco y negro llamativo con un color de acento brillante, adecuado para mostrar datos climáticos. Incluye diseño responsivo y soporte para modo oscuro.