Componente Infografica
Un componente infografico reattivo con microinterazioni coinvolgenti e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
</div>
</div>
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-3">
<h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
<span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
</div>
</div>
</div>Componenti correlati
Componente Infografica
Un semplice componente infografico per piattaforme di marketplace, caratterizzato da un coinvolgente effetto hover. Utilizza una combinazione di colori viola/viola ed è completamente reattivo con il supporto della modalità scura.
3D_Grayscale_Infographics_Component
Un componente di infografica in scala di grigi reattivo e ispirato al 3D per il consumo di blog/contenuti, caratterizzato da profondità e coinvolgimento. Include il supporto per la modalità oscura.
Componente Infografica
Componente infografico complesso con design del neumorfismo, combinazione di colori complementare, supporto per la modalità reattiva e scura, per scopi aziendali/aziendali, utilizzando Tailwind CSS.