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.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
<p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
<p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de infografía
Componente de infografía: interfaz de usuario de modo oscuro con diseño complejo y en escala de grises. Responsivo con soporte para temas oscuros.
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.
Componente de infografía
Un componente de infografía neumórfica con tonos tierra inspirados en el suelo, los árboles y los paisajes. Cuenta con un estilo de interfaz de usuario suave con una complejidad moderada para uso empresarial/corporativo. El diseño es responsivo y admite temas oscuros usando Tailwind CSS.