Componente de infografía
Un componente de infografía simple diseñado con una estética 3D, utilizando colores pastel para las interfaces de redes sociales, con soporte para modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200">Infographics</h2>
<div class="mt-4 flex flex-col items-center">
<div class="bg-blue-200 dark:bg-blue-700 rounded-full w-24 h-24 flex items-center justify-center shadow-inner">
<img src="https://picsum.photos/100/100" alt="Random Image" class="rounded-full object-cover">
</div>
<p class="mt-2 text-lg text-gray-700 dark:text-gray-300">Engaging 3D Design</p>
</div>
<div class="mt-4 flex justify-between">
<div class="bg-green-200 dark:bg-green-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 1</p>
</div>
<div class="bg-yellow-200 dark:bg-yellow-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 2</p>
</div>
<div class="bg-pink-200 dark:bg-pink-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 3</p>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Info</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<p class="ml-2 text-gray-700 dark:text-gray-300">John Doe</p>
</div>
</div>
</div>Componentes relacionados
Componente de infografía
Un componente de infografía complejo con un estilo de diseño Skeuomorphism y una combinación de colores vibrantes, adecuado para plataformas de comercio electrónico. Es responsivo y admite el modo oscuro usando Tailwind CSS. Muestra varias estadísticas de productos con elementos interactivos.
Componente de infografía
Un componente de infografía diseñado con skeuomorfismo, con efectos responsivos y soporte para temas oscuros, utilizando Tailwind CSS.
Componente de infografía retro vintage
Un componente de tablero de infografías de redes sociales receptivo, de color pastel, de estilo retro / vintage construido con Tailwind CSS, con estadísticas de perfil de usuario, gráfico de barras de hashtags de tendencia y una imagen ilustrativa. Incluye soporte para el modo oscuro a través del prefijo dark: de Tailwind y animaciones interactivas de desplazamiento (no se requiere JavaScript).