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
Un componente infográfico de complejidad moderada para el gobierno/servicios públicos, con colores dulces y un sutil diseño de microinteracción.
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 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.