Componente infografica neumorfica per l'e-commerce
Un componente infografico neumorfico semplice e reattivo per l'e-commerce, che utilizza una combinazione di colori analoga e supporta la modalità scura.
Codice HTML
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-800 font-sans antialiased text-gray-800 dark:text-gray-200 transition-colors duration-300">
<div class="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Infographic Card 1: Sales -->
<div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-700 dark:to-gray-900
shadow-gray-300/60 dark:shadow-gray-900/60
dark:hover:shadow-indigo-700/50
hover:shadow-indigo-300/80 transition-all duration-300 transform
hover:-translate-y-1 hover:scale-105
relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-indigo-200 dark:bg-indigo-600 flex items-center justify-center mb-4
shadow-inner shadow-indigo-300/40 dark:shadow-indigo-900/40
group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 transition-colors duration-300">
<svg class="w-8 h-8 text-indigo-700 dark:text-indigo-200 group-hover:text-indigo-800 dark:group-hover:text-indigo-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 0119 12h-8V3.055z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
</path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-indigo-800 dark:text-indigo-200">+25% Sales Growth</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Year-over-year increase in total sales volume. A strong indication of market expansion and product demand.</p>
</div>
</div>
<!-- Infographic Card 2: Customers -->
<div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900
shadow-gray-300/60 dark:shadow-gray-900/60
dark:hover:shadow-purple-700/50
hover:shadow-purple-300/80 transition-all duration-300 transform
hover:-translate-y-1 hover:scale-105
relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-purple-200 dark:bg-purple-600 flex items-center justify-center mb-4
shadow-inner shadow-purple-300/40 dark:shadow-purple-900/40
group-hover:bg-purple-300 dark:group-hover:bg-purple-700 transition-colors duration-300">
<svg class="w-8 h-8 text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5m0-9a4 4 0 110-8 4 4 0 010 8zm-2 10l3-3m0 0l3 3m-3-3v8"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-purple-800 dark:text-purple-200">50k+ Happy Customers</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Our growing community of satisfied buyers. Building trust and loyalty with exceptional service and products.</p>
</div>
</div>
<!-- Infographic Card 3: Ratings -->
<div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-pink-100 to-rose-100 dark:from-gray-700 dark:to-gray-900
shadow-gray-300/60 dark:shadow-gray-900/60
dark:hover:shadow-rose-700/50
hover:shadow-rose-300/80 transition-all duration-300 transform
hover:-translate-y-1 hover:scale-105
relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-pink-200 dark:bg-pink-600 flex items-center justify-center mb-4
shadow-inner shadow-pink-300/40 dark:shadow-pink-900/40
group-hover:bg-pink-300 dark:group-hover:bg-pink-700 transition-colors duration-300">
<svg class="w-8 h-8 text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2.5l2.69 5.5l6.09.88l-4.41 4.3l1.04 6.07L10 18.27l-5.41 2.85l1.04-6.07l-4.41-4.3l6.09-.88L10 2.5z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-pink-800 dark:text-pink-200">4.9/5 Average Rating</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Consistently high product ratings from verified purchases. Reflecting superior quality and user satisfaction.</p>
</div>
</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
Un componente infografico complesso con uno stile di design Skeuomorphism e una combinazione di colori vibranti, adatto per piattaforme di e-commerce. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Visualizza varie statistiche di prodotto con elementi interattivi.
Memphis_Muted_Infographics_Component_Government
Un componente infografico per servizi governativi/pubblici, ispirato al design di Memphis con una combinazione di colori tenui/desaturati. Presenta geometrie audaci, motivi giocosi e un layout reattivo con supporto per la modalità scura. Visualizza visivamente le statistiche e le informazioni chiave.