Componente de infografía
Un componente de infografía simple y receptivo con elementos de diseño 3D y un esquema de color análogo para uso de blog/contenido. Incluye soporte para temas oscuros usando Tailwind CSS.
Código HTML
<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Finding</h2>
<p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</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 de infografía complejo y receptivo para sitios web comerciales, diseñado con un estilo Skeuomorphism y un esquema de color vibrante utilizando Tailwind CSS. Incluye soporte para modo oscuro y elementos interactivos.
RetroInfographicsComponent
Un componente de infografía responsivo con un diseño retro/vintage, combinación de colores pastel y compatibilidad con el modo oscuro. Utiliza Tailwind CSS para el estilo e incluye múltiples elementos interactivos para una interfaz compleja adecuada para blogs y consumo de contenido. Incluye una línea de tiempo, barras de progreso, gráficos y una llamada a la acción, todo ello con estética de los años 80/90 y colores pastel. Utiliza imágenes aleatorias de picsum.photos y randomuser.me para avatares.