Infografica

Componente Infografica

Un semplice componente infografico progettato con un'estetica 3D, utilizzando colori pastello per le interfacce dei social media, con supporto per la modalità oscura.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200">Infographics</h2>
  <div class="mt-4 flex flex-col items-center">
    <div class="bg-blue-200 dark:bg-blue-700 rounded-full w-24 h-24 flex items-center justify-center shadow-inner">
      <img src="https://picsum.photos/100/100" alt="Random Image" class="rounded-full object-cover">
    </div>
    <p class="mt-2 text-lg text-gray-700 dark:text-gray-300">Engaging 3D Design</p>
  </div>
  <div class="mt-4 flex justify-between">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 1</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 1</p>
    </div>
    <div class="bg-yellow-200 dark:bg-yellow-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 2</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 2</p>
    </div>
    <div class="bg-pink-200 dark:bg-pink-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 3</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 3</p>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Info</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">
      <p class="ml-2 text-gray-700 dark:text-gray-300">John Doe</p>
    </div>
  </div>
</div>

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.

Apri anteprima

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md relative overflow-hidden">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Business Overview</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">An overview of the current business landscape and insights into market trends.</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Sales Data</h3>
            <img src="https://picsum.photos/200/100" alt="Sales Data Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Current month sales: 2500 units</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Customer Growth</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Customer Growth Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Growth rate: 15% YoY</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Market Trends</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Market Trends Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Emerging trends in the industry.</p>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200">Team Members</h4>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
        </div>
    </div>
</div>

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.

Apri anteprima

                <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>

Componente Infografica

Componente infografica con stile Neumorfismo, combinazione di colori in scala di grigi, layout semplice, per scopi di dashboard, reattivo con supporto per tema scuro

Apri anteprima

                <div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Total Users</h3>
        <p class="text-3xl font-bold">15,250</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 5.2%</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Revenue</h3>
        <p class="text-3xl font-bold">$150,000</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 8.1%</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">New Orders</h3>
        <p class="text-3xl font-bold">750</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-red-500 dark:text-red-400">- 2.5%</span>
      </div>
    </div>
  </div>

  <!-- Include custom shadow styles for Neumorphism -->
  <style>
    .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
    }
  </style>
</div>

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.

Apri anteprima

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Componente Infografica

Un componente infografico reattivo progettato in uno stile scheumorfico utilizzando Tailwind CSS con supporto per il tema scuro. Imita gli elementi del mondo reale per visualizzare visivamente le informazioni.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
      </div>
    </div>
  </div>
</div>

Componente Infografica

Componente infografica con stile Brutalismo, contrasto elevato, layout insolito, reattivo con supporto per la modalità oscura utilizzando css tailwind

Apri anteprima

                <section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
  <div class="container mx-auto">
    <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
        <p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
        <p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
        <p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
      </div>
    </div>
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
            <div>
                <h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
                <p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
                 <div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
            </div>
        </div>
         <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
            <h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
            <img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
            <p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
        </div>
    </div>
     <div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
        <h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
        <div class="flex space-x-8">
            <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
                <p class="text-lg">Specific insight one</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
                <p class="text-lg">Specific insight two</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
                <p class="text-lg">Specific insight three</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
                <p class="text-lg">Specific insight four</p>
            </div>
        </div>
    </div>
  </div>
</section>

Componente Infografica

Un componente infografico reattivo con animazioni piccole e coinvolgenti che rispondono alle azioni dell'utente con il supporto del tema scuro, creato utilizzando Tailwind CSS.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
    <div class="flex flex-wrap">
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
                <p class="text-gray-600 dark:text-gray-400">50%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
                <p class="text-gray-600 dark:text-gray-400">70%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
                <p class="text-gray-600 dark:text-gray-400">30%</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
        <div class="flex flex-wrap">
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Componente Infografica

Un componente infografico reattivo con microinterazioni coinvolgenti e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <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>

Componente Infografica

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

Apri anteprima

                <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>

Categorie