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.
Codice HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<div class="text-center mb-4">
<h2 class="text-3xl font-bold">Infographic Title</h2>
<p class="text-gray-400">Engaging insights and data visualizations</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<h3 class="font-semibold text-xl">Key Insight #1</h3>
<img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
<p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
</div>
<div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<h3 class="font-semibold text-xl">Key Insight #2</h3>
<img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
<p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Join the Conversation</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
</div>
<button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1c1c1c;
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, #6a0dad, #1e90ff);
}
}
</style>Componenti correlati
Componente Infografica
Un componente infografico reattivo con microinterazioni coinvolgenti e supporto per temi scuri utilizzando Tailwind CSS.
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 neumorfico con toni della terra ispirati al suolo, agli alberi e ai paesaggi. Presenta uno stile dell'interfaccia utente morbido con complessità moderata per uso aziendale/aziendale. Il design è reattivo e supporta temi scuri utilizzando Tailwind CSS.