Componenti Infografica Componente Infografica

Componente Infografica

Un componente infografico minimalista caratterizzato da spazi puliti ed elementi minimali, supporto per il design reattivo e tema scuro.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

Componenti correlati

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.

Aperto

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.

Aperto

Infografica sugli appuntamenti skeuomorfi

Un componente infografico complesso e reattivo progettato per piattaforme di appuntamenti/social con uno stile scheumorfico e una combinazione di colori seppia/marrone, con più elementi interattivi e supporto per la modalità scura.

Aperto