Componente Infografica
Un componente infografico reattivo progettato in uno stile scheumorfico utilizzando Tailwind CSS con supporto per il tema scuro. Imita gli elementi del mondo reale per visualizzare visivamente le informazioni.
Codice 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>Componenti correlati
Componente Infografica
Un semplice componente infografico progettato con lo stile Neumorfismo e una combinazione di colori pastello. Visualizza una scheda del profilo e le statistiche di base in un layout visivamente accattivante adatto per siti Web aziendali o aziendali.
Componente Infografica
Un componente infografico semplice e reattivo con elementi di design 3D e una combinazione di colori analoga per l'uso di blog/contenuti. Include il supporto per il tema scuro utilizzando Tailwind CSS.
Componente Infografica
Componente infografica per il portfolio - Material Design, combinazione di colori analoga, complessità moderata, reattiva, supporto per temi scuri