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
Un componente infográfico simple y receptivo para aplicaciones de criptomonedas / blockchain con una interfaz de usuario de modo oscuro y una paleta de colores bosque / verde. Muestra métricas clave como el total de transacciones, el volumen diario y los usuarios activos.
Componente de infografía
Un componente de infografía minimalista con espacios limpios y elementos mínimos, soporte para diseño responsivo y tema oscuro.
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.