Componente de infografía
Un componente de infografía responsivo con animaciones pequeñas y atractivas que responden a las acciones del usuario con soporte para temas oscuros, creado con Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
<p class="text-gray-600 dark:text-gray-400">50%</p>
</div>
</div>
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
<p class="text-gray-600 dark:text-gray-400">70%</p>
</div>
</div>
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
<p class="text-gray-600 dark:text-gray-400">30%</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
<div class="flex flex-wrap">
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de infografía
Componente de infografía con estilo de neumorfismo, combinación de colores en escala de grises, diseño simple, para fines de tablero, responsivo con soporte de tema oscuro
Componente de infografía
Un componente infográfico simple diseñado con estilo Neumorfismo y una combinación de colores Pastel. Muestra una tarjeta de perfil y estadísticas básicas en un diseño visualmente atractivo adecuado para sitios web comerciales o corporativos.
Componente de infografía
Un componente de infografía responsivo diseñado en un estilo skeuomórfico utilizando Tailwind CSS con soporte para temas oscuros. Imita elementos del mundo real para mostrar información visualmente.