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 componente infografico 3D reattivo progettato per le interfacce dei social media con colori vivaci e supporto per temi scuri, che incorpora elementi tridimensionali per profondità e coinvolgimento.
Componente Infografica
Componente infografica - Interfaccia utente in modalità oscura con scala di grigi e design complesso. Reattivo con supporto per il tema scuro.
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.