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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
<div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
<img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">CEO, Company XYZ</p>
<div class="mt-4 flex justify-between w-full">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
</div>
</div>
<div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
</div>
</div>Componenti correlati
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 vintage retrò
Un componente reattivo, color pastello, in stile retrò/vintage per la dashboard delle infografiche dei social media costruito con Tailwind CSS, con statistiche del profilo utente, grafico a barre degli hashtag di tendenza e un'immagine illustrativa. Include il supporto per la modalità oscura tramite il prefisso dark: di Tailwind e le animazioni interattive al passaggio del mouse (non è richiesto JavaScript).
Infografica retrò
Un componente infografico retrò/vintage semplice e reattivo per portfolio con supporto per la modalità scura. Utilizza una combinazione di colori complementari ed elementi minimi.