Rechercher des composants

Catégories

Composants Infographies

Infographies

Représentations visuelles d’informations ou de données

3D_Grayscale_Infographics_Component

Un composant d’infographie en niveaux de gris réactif, inspiré de la 3D, pour la consommation de blogs/contenus, avec de la profondeur et de l’engagement. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-12 sm:py-16 lg:py-20 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 sm:mb-16 tracking-tight leading-tight">
      <span class="relative inline-block">
        Key Insights
        <span class="block absolute -inset-1 -skew-y-3 bg-gray-300 dark:bg-gray-700"></span>
        <span class="relative text-gray-900 dark:text-gray-50">Unveiled</span>
      </span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">

      <!-- Infographic Card 1 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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="M9.75 17L9 20l-1.25-3M15 17l.5 3L16 17m-6-10V4a1 1 0 011-1h2a1 1 0 011 1v3M9 16h6M8 8h8M5 12h14a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              85% Growth
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Our innovative strategies led to a significant 85% increase in market share over the last quarter.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:-rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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="M7 12l3-3m0 0l3 3m-3-3v8a7 7 0 0014 0v-.5M10 12l-3 3m0 0l-3-3m3 3V4a7 7 0 00-14 0v.5"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              20% Efficiency
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Optimized workflows resulted in a 20% increase in operational efficiency across all departments.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 left-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform translate-x-1/2 rotate-3"></div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13L4 6a2 2 0 012-2h12a2 2 0 012 2v7"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              95% Satisfaction
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Customer feedback surveys show a consistent 95% satisfaction rate for our products and services.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

    </div>
  </div>
</section>

<style>
/* Define 3D Transform Utility Classes */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.rotate-y-6 {
  transform: rotateY(6deg);
}
.-rotate-y-6 {
  transform: rotateY(-6deg);
}

/* Soft 3D shadow on hover for cards */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Inner shadow for circles */
.shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.15), inset 0px 0px 5px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.6), inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>

Composant Infographie

Composant d’infographie avec design minimaliste / plat, palette de couleurs de tons de terre, complexité modérée pour les entreprises / les entreprises, réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">Our Company at a Glance</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Statistic 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-green-700 dark:text-green-400 mb-2">150+</div>
        <p class="text-gray-600 dark:text-gray-300">Projects Completed</p>
      </div>

      <!-- Statistic 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-amber-700 dark:text-amber-400 mb-2">10 Years</div>
        <p class="text-gray-600 dark:text-gray-300">In Business</p>
      </div>

      <!-- Statistic 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-stone-700 dark:text-stone-400 mb-2">99%</div>
        <p class="text-gray-600 dark:text-gray-300">Client Satisfaction</p>
      </div>
    </div>

    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Feature 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic1/100/100" alt="Innovation Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Innovative Solutions</h3>
        <p class="text-gray-600 dark:text-gray-300">We constantly strive to provide cutting-edge solutions for your business needs.</p>
      </div>

      <!-- Feature 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic2/100/100" alt="Support Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Dedicated Support</h3>
        <p class="text-gray-600 dark:text-gray-300">Our team is committed to offering unparalleled support every step of the way.</p>
      </div>
    </div>

    <div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 text-center">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Meet Our Lead Team Member</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-green-500 dark:border-green-400">
      <p class="text-xl font-semibold text-gray-900 dark:text-white">John Doe</p>
      <p class="text-gray-600 dark:text-gray-300">Chief Executive Officer</p>
      <p class="mt-4 text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">"Our vision is to empower businesses with efficient and effective solutions that drive growth and success in the digital age."</p>
    </div>

  </div>
</div>

Composant Infographie

Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    
    <!-- Retro/Vintage background elements -->
    <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full absolute -top-8 -left-8"></div>
      <div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full absolute -bottom-8 -right-8"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute top-1/4 -left-16 transform -rotate-45"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute bottom-1/4 -right-16 transform rotate-45"></div>
    </div>

    <div class="relative z-10">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
        Our Company Milestones
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Milestone 1 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">1985</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Founded</h3>
          <p class="text-gray-600 dark:text-gray-300">Started with a vision to innovate the industry.</p>
        </div>

        <!-- Milestone 2 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2000</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Global Expansion</h3>
          <p class="text-gray-600 dark:text-gray-300">Expanded our reach to international markets.</p>
        </div>

        <!-- Milestone 3 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2023</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Future Ready</h3>
          <p class="text-gray-600 dark:text-gray-300">Embracing new technologies for sustainable growth.</p>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-block bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 py-3 px-8 rounded-full font-bold uppercase tracking-wider shadow-md hover:bg-gray-800 dark:hover:bg-gray-300 transition duration-300">
          Learn More About Our Journey
        </a>
      </div>
    </div>
  </div>
</div>

Un composant d’infographie complexe et réactif pour les sites Web d’entreprise, conçu avec un style Skeuomorphism et une palette de couleurs vives à l’aide de Tailwind CSS. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans relative overflow-hidden">

  <!-- Background texture overlaid with a subtle grid for depth -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/clean-gray-paper.png');"></div>

  <!-- Main container with a rounded, lifted effect -->
  <div class="relative max-w-7xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-2xl overflow-hidden
              transform transition-all duration-300 hover:scale-[1.005] hover:shadow-3xl
              dark:shadow-[0_20px_50px_rgba(0,0,0,0.8)] dark:border dark:border-gray-600">

    <!-- Inner metallic bezel effect -->
    <div class="absolute inset-0 rounded-3xl p-px
                bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
                pointer-events-none"></div>

    <!-- Content Area -->
    <div class="relative p-8 md:p-12 lg:p-16 text-gray-800 dark:text-gray-200">

      <!-- Header Section -->
      <div class="mb-12 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4
                   text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600
                   dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                   drop-shadow-[0_4px_3px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_4px_3px_rgba(0,0,0,0.6)]">
          Corporate Performance Overview
        </h1>
        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto
                  drop-shadow-[0_1px_1px_rgba(0,0,0,0.1)]">
          A comprehensive look at our key metrics and strategic achievements in the past year.
        </p>
      </div>

      <!-- Infographics Grid Container -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">

        <!-- Card 1: Sales Growth -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-cyan-400 to-blue-600 dark:from-cyan-700 dark:to-blue-900
                    rounded-2xl shadow-xl border border-blue-700/50 dark:border-blue-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-blue-700 dark:bg-blue-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" 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="M13 7h8m0 0v8m0-8l-8 8A5 5 0 013 17V7h4a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Sales Growth</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">+25%</p>
            <p class="text-cyan-100 dark:text-cyan-200 text-lg">Year-over-year revenue increase, driven by new market penetration.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Q4 Target:</span>
              <span class="text-white text-xl font-bold">$12M</span>
            </div>
          </div>
        </div>

        <!-- Card 2: Customer Satisfaction -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-lime-400 to-green-600 dark:from-lime-700 dark:to-green-900
                    rounded-2xl shadow-xl border border-green-700/50 dark:border-green-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-green-700 dark:bg-green-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" 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="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Customer Satisfaction</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">92%</p>
            <p class="text-lime-100 dark:text-lime-200 text-lg">Improved NPS score, showcasing our commitment to client success.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Target Score:</span>
              <span class="text-white text-xl font-bold">90%</span>
            </div>
          </div>
        </div>

        <!-- Card 3: Employee Retention -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-purple-700 dark:to-indigo-900
                    rounded-2xl shadow-xl border border-indigo-700/50 dark:border-indigo-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-indigo-300 to-indigo-500 dark:from-indigo-600 dark:to-indigo-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-indigo-700 dark:bg-indigo-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" 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 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2m3-2h4m-4 0h4m-12 0h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Employee Retention</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">88%</p>
            <p class="text-purple-100 dark:text-purple-200 text-lg">High talent retention demonstrating a positive work environment.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Industry Avg:</span>
              <span class="text-white text-xl font-bold">80%</span>
            </div>
          </div>
        </div>

      </div>

      <!-- Key Initiatives Section -->
      <div class="mt-16 bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl shadow-xl
                  border border-gray-200 dark:border-gray-700
                  flex flex-col lg:flex-row items-center justify-between gap-8">
        <div class="lg:w-1/2">
          <h3 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4
                     text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-500
                     dark:from-red-400 dark:to-yellow-400
                     drop-shadow-[0_2px_2px_rgba(0,0,0,0.1)]">
            Our Key Initiatives
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
            Focused efforts on research & development, sustainability, and global expansion are driving our future success.
          </p>
        </div>
        <div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-2">Innovation Hub</h4>
            <p class="text-gray-600 dark:text-gray-300">Investing in cutting-edge technology and talent.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-green-600 dark:text-green-400 mb-2">Sustainable Practices</h4>
            <p class="text-gray-600 dark:text-gray-300">Reducing our environmental footprint globally.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-2">Global Expansion</h4>
            <p class="text-gray-600 dark:text-gray-300">Opening new markets and partnerships worldwide.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-red-600 dark:text-red-400 mb-2">Team Empowerment</h4>
            <p class="text-gray-600 dark:text-gray-300">Fostering growth and well-being for all employees.</p>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-16 text-center">
        <a href="#" class="inline-flex items-center px-8 py-4 rounded-full
                          bg-gradient-to-r from-orange-500 to-red-600 text-white text-xl font-bold
                          shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300
                          dark:from-orange-400 dark:to-red-500
                          border border-orange-700 dark:border-orange-300
                          group">
          View Full Report
          <svg class="ml-3 h-6 w-6 text-white transform group-hover:translate-x-1 transition-transform" 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 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
        <p class="mt-8 text-gray-500 dark:text-gray-400 text-sm">
          © 2023 Your Company Name. All rights reserved.
        </p>
      </div>

    </div>
  </div>

</div>

<!-- To enable dark mode, add a class "dark" to your html tag:
<html class="dark">
  ... the component ...
</html>
-->

Composant Infographie

Composant d’infographie complexe avec conception Neumorphism, schéma de couleurs complémentaire, prise en charge du mode réactif et sombre, pour les entreprises/entreprises, à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center"><div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 max-w-6xl w-full transition-all duration-300 ease-in-out"><h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 text-center">Annual Business Overview</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-indigo-500 dark:bg-indigo-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">+25%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Year-over-year increase in total revenue.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-teal-500 dark:bg-teal-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">$12M</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Net Profit</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Record-breaking profits for the fiscal year.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-red-500 dark:bg-red-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">1500+</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">New Clients</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Expanding our client base significantly.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-yellow-500 dark:bg-yellow-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">98%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Client Retention</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Strong client satisfaction and loyalty.</p></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Key Performance Indicators</h2><div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Market Share Analysis</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Our market share has seen a steady increase, climbing from 15% to 20% in the last quarter, outpacing competitors through strategic initiatives and product innovations. This growth is attributed to aggressive marketing campaigns and enhanced product features that resonate with our target audience.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Market Share Chart</p></div></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Employee Satisfaction Survey</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Employee satisfaction remains high at an average of 4.5 out of 5 stars. Key factors contributing to this excellent rating include flexible work arrangements, professional development opportunities, and a supportive work environment. We continue to invest in our employees' well-being and growth.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Employee Satisfaction Chart</p></div></div></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Customer Testimonials</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"The insights provided by this company were invaluable. Our business has never been more efficient!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">John Doe, CEO of Alpha Corp</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"Their data analysis transformed our marketing strategy. Highly recommended!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith, Marketing Director at Beta Ltd</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"A truly professional team with impactful solutions. We saw immediate positive results."</p><p class="font-semibold text-gray-700 dark:text-gray-200">David Lee, Founder of Gamma Solutions</p></div></div></div><div class="mt-12 text-center"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Future Outlook</h2><p class="text-gray-700 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">Looking ahead, we are focused on expanding into new markets, innovating our product lines, and enhancing customer experience. Our projections indicate continued growth and a stronger market presence, driven by our commitment to excellence and strategic partnerships.</p><button class="mt-8 px-8 py-4 bg-purple-600 dark:bg-purple-800 text-white font-bold rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:bg-purple-700 dark:hover:bg-purple-900 transition-all duration-300 ease-in-out">Download Full Report</button></div></div></div><style>.shadow-neumorphic-light {box-shadow: 9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff;}.dark .shadow-neumorphic-dark {box-shadow: 9px 9px 18px #1a1a1a, -9px -9px 18px #2a2a2a;}.shadow-neumorphic-card-light {box-shadow: 6px 6px 12px #a7a7a7, -6px -6px 12px #ffffff;}.dark .shadow-neumorphic-card-dark {box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #2a2a2a;}.shadow-neumorphic-circle-light {box-shadow: 7px 7px 14px #8f8f8f, -7px -7px 14px #ffffff;}.dark .shadow-neumorphic-circle-dark {box-shadow: 7px 7px 14px #151515, -7px -7px 14px #303030;}.shadow-neumorphic-button-light {box-shadow: 6px 6px 12px #9c27b0, -6px -6px 12px #d589e4;}.dark .shadow-neumorphic-button-dark {box-shadow: 6px 6px 12px #512da8, -6px -6px 12px #673ab7;}</style>

Composant Infographie

Un composant infographique complexe avec un style de conception Skeuomorphism et une palette de couleurs vives, adapté aux plateformes de commerce électronique. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Il affiche diverses statistiques de produits avec des éléments interactifs.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-12 text-center drop-shadow-lg">E-commerce Performance Dashboard</h1>

    <!-- Skeuomorphism Container for the Dashboard -->
    <div class="bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 p-8 rounded-3xl shadow-inset-xl border-t border-l border-gray-400 dark:border-gray-600 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      
      <!-- Top Bezel / Highlight -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-white opacity-20 dark:from-gray-300 dark:opacity-10 rounded-t-3xl"></div>
      <!-- Bottom Bezel / Shadow -->
      <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-black opacity-10 dark:from-gray-900 dark:opacity-20 rounded-b-3xl"></div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Sales Overview Card -->
        <div class="bg-gradient-to-br from-emerald-400 to-teal-500 dark:from-emerald-700 dark:to-teal-800 p-6 rounded-2xl shadow-xl border border-emerald-300 dark:border-emerald-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>

          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Total Sales</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-2 4a3 3 0 010 6m-9-4h4m-unset-24 0a3 3 0 010 6m-9-4h4L3 13.786A3.001 3.001 0 001 19c0 1.657 1.343 3 3 3h16c1.657 0 3-1.343 3-3 0-1.268-.787-2.378-1L12 21v-4m0-4c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$1,234,567</p>
          <p class="text-emerald-100 text-sm opacity-90"><span class="text-white font-semibold">+15%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 5 min ago</div>
        </div>

        <!-- New Customers Card -->
        <div class="bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-800 p-6 rounded-2xl shadow-xl border border-purple-400 dark:border-purple-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">New Customers</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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 20h2a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2m0 0l4-4m-4 4l4 4m0-4 4 4m0-4L9 15l4 4"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">8,765</p>
          <p class="text-purple-100 text-sm opacity-90"><span class="text-white font-semibold">+22%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 30 min ago</div>
        </div>

        <!-- Conversion Rate Card -->
        <div class="bg-gradient-to-br from-red-500 to-rose-600 dark:from-red-700 dark:to-rose-800 p-6 rounded-2xl shadow-xl border border-red-400 dark:border-red-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Conversion Rate</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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="M13 7h8m0 0v8m0-8L11 9m-11 5h8m0 0v8m0-8L3 14m-3 5h8m0 0v8m0-8L3 19"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">3.24%</p>
          <p class="text-red-100 text-sm opacity-90"><span class="text-white font-semibold">+0.5%</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 1 hr ago</div>
        </div>

        <!-- Average Order Value Card -->
        <div class="bg-gradient-to-br from-blue-500 to-cyan-600 dark:from-blue-700 dark:to-cyan-800 p-6 rounded-2xl shadow-xl border border-blue-400 dark:border-blue-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-700 dark:from-blue-800 dark:to-cyan-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10 flex items-center justify-between mb-4">
            <h3 class="text-white text-xl font-bold drop-shadow-md">Avg. Order Value</h3>
            <div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
              <svg class="w-6 h-6 text-white" 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="M9 19V6l12-3v13M9 19c0 1.105-1.12 2-2.5 2S4 20.105 4 19s1.12-2 2.5-2 2.5.895 2.5 2zm12 0c0 1.105-1.12 2-2.5 2S16 20.105 16 19s1.12-2 2.5-2 2.5.895 2.5 2zm-8-19v13m0-12h8"></path></svg>
            </div>
          </div>
          <p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$127.50</p>
          <p class="text-blue-100 text-sm opacity-90"><span class="text-white font-semibold">-$5.00</span> from last month</p>
          <div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 2 hrs ago</div>
        </div>

        <!-- Top Products Section -->
        <div class="lg:col-span-2 bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-700 dark:to-slate-800 p-6 rounded-2xl shadow-xl border border-slate-300 dark:border-slate-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-slate-300 to-slate-500 dark:from-slate-800 dark:to-slate-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-gray-900 dark:text-white text-2xl font-bold mb-6 drop-shadow-md">Top Selling Products</h3>
            <div class="space-y-4">

              <!-- Product Item 1 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/178/80/80" alt="Product 1" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Stylish Wireless Headphones</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Electronics</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$199.99</span>
              </div>

              <!-- Product Item 2 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/180/80/80" alt="Product 2" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Ergonomic Office Chair</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Home & Office</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$349.00</span>
              </div>

              <!-- Product Item 3 -->
              <div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://picsum.photos/id/182/80/80" alt="Product 3" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
                <div class="flex-grow">
                  <p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Premium Coffee Maker</p>
                  <p class="text-gray-600 dark:text-gray-300 text-sm">Kitchen Appliances</p>
                </div>
                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$89.50</span>
              </div>

            </div>
          </div>
        </div>

        <!-- Recent Orders Section -->
        <div class="bg-gradient-to-br from-orange-400 to-amber-500 dark:from-orange-700 dark:to-amber-800 p-6 rounded-2xl shadow-xl border border-orange-300 dark:border-orange-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-r from-orange-600 to-amber-700 dark:from-orange-800 dark:to-amber-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
          <div class="relative z-10">
            <h3 class="text-white text-2xl font-bold mb-6 drop-shadow-md">Recent Orders</h3>
            <div class="space-y-4">

              <!-- Order Item 1 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">John Doe</p>
                  <p class="text-orange-100 text-sm">Order #12345 - $249.99</p>
                </div>
                <span class="text-white text-sm opacity-80">2 min ago</span>
              </div>

              <!-- Order Item 2 -->
              <div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
                <img src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
                <div class="flex-grow">
                  <p class="text-white font-semibold text-lg">Jane Smith</p>
                  <p class="text-orange-100 text-sm">Order #12344 - $75.00</p>
                </div>
                <span class="text-white text-sm opacity-80">15 min ago</span>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Utility for Inset Shadow */
  .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 -8px 16px rgba(255, 255, 255, 0.2);
  }
  .dark .shadow-inset-xl {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 -8px 16px rgba(100, 100, 100, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* Drop shadow for text to enhance relief effect */
  .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  .dark .drop-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>

Composant Infographie

Un composant d’infographie réactif avec des éléments de conception 3D, une palette de couleurs pastel et une complexité modérée pour les tableaux de bord, avec prise en charge du mode sombre. Pas de JavaScript, seulement du HTML avec Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center"><div class="container mx-auto"><h1 class="text-4xl font-bold text-center mb-12 text-gray-800 dark:text-white">Infographics Dashboard</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-purple-200 via-pink-200 to-blue-200 opacity-70 dark:from-purple-700 dark:via-pink-700 dark:to-blue-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Total Sales</h2><p class="text-5xl font-extrabold text-purple-600 dark:text-purple-400">$12,345</p></div><div class="relative h-48"><div class="absolute bottom-0 left-0 w-full flex justify-around items-end"><div class="w-12 h-24 bg-purple-400 dark:bg-purple-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-32" style="height: 50%;"></div><div class="w-12 h-32 bg-pink-400 dark:bg-pink-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-40" style="height: 70%;"></div><div class="w-12 h-28 bg-blue-400 dark:bg-blue-600 rounded-t-lg shadow-lg transform -skew-x-12 origin-bottom transition-all duration-300 group-hover:h-36" style="height: 60%;"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-green-200 via-yellow-200 to-red-200 opacity-70 dark:from-green-700 dark:via-yellow-700 dark:to-red-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">New Users</h2><p class="text-5xl font-extrabold text-green-600 dark:text-green-400">876</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg transform translate-z-10 group-hover:scale-110 transition-transform duration-300"><div class="w-24 h-24 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center"><svg class="w-16 h-16 text-green-700 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-br from-orange-200 via-red-200 to-yellow-200 opacity-70 dark:from-orange-700 dark:via-red-700 dark:to-yellow-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">Revenue Breakdown</h2><p class="text-5xl font-extrabold text-orange-600 dark:text-orange-400">65%</p></div><div class="relative h-48 flex items-center justify-center"><div class="w-36 h-36 rounded-full bg-orange-400 dark:bg-orange-600 flex items-center justify-center shadow-lg" style="transform: rotateX(60deg) rotateZ(45deg); outlook: 1px solid transparent;"><div class="w-24 h-24 rounded-full bg-white dark:bg-gray-800 absolute" style="transform: translateZ(10px);"></div><div class="w-32 h-32 rounded-full border-8 border-orange-200 dark:border-orange-500 absolute" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 40%, 50% 50%); transform: rotate(-45deg);"></div></div></div></div></div><div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 relative overflow-hidden group md:col-span-2 lg:col-span-full"><div class="absolute inset-0 bg-gradient-to-br from-teal-200 via-cyan-200 to-indigo-200 opacity-70 dark:from-teal-700 dark:via-cyan-700 dark:to-indigo-700 blur-3xl transform scale-150 group-hover:scale-100 transition-all duration-500"></div><div class="relative z-10"><div class="text-center text-gray-700 dark:text-gray-200 mb-6"><h2 class="text-2xl font-semibold mb-2">User Demographics</h2><p class="text-4xl font-extrabold text-teal-600 dark:text-teal-400">Global Reach</p></div><div class="flex justify-center items-center flex-wrap gap-4"><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar1/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar2/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar3/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar4/200/200" alt="User Avatar" class="object-cover w-full h-full"></div><div class="w-24 h-24 rounded-full overflow-hidden shadow-lg transform hover:scale-110 transition-transform duration-300"><img src="https://picsum.photos/seed/avatar5/200/200" alt="User Avatar" class="object-cover w-full h-full"></div></div></div></div></div></div></div>

Composant d’infographie vintage rétro

Un composant de tableau de bord d’infographie de médias sociaux réactif, de couleur pastel, de style rétro/vintage, construit avec Tailwind CSS, avec des statistiques de profil utilisateur, un graphique à barres de hashtag tendance et une image illustrative. Inclut la prise en charge du mode sombre via le préfixe dark : de Tailwind et des animations de survol interactives (aucun JavaScript requis).

Ouvrir Aperçu

                <div class="relative max-w-4xl mx-auto p-8 bg-pink-50 dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
  <!-- Decorative retro shapes -->
  <span class="hidden md:block absolute top-4 left-4 w-12 h-12 bg-blue-100 dark:bg-blue-700 rounded-full"></span>
  <span class="hidden md:block absolute top-10 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-700 rotate-45"></span>
  <span class="hidden md:block absolute bottom-8 left-16 w-6 h-6 bg-green-100 dark:bg-green-700 rounded-sm"></span>

  <div class="relative z-10">
    <h2 class="text-3xl font-extrabold text-purple-700 dark:text-purple-300 mb-2">Retro Social Insights</h2>
    <p class="text-md text-gray-700 dark:text-gray-300 mb-6">Your 90s style user engagement dashboard at a glance</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Stats Card -->
      <div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4 space-y-4">
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"
               class="w-12 h-12 rounded-full border-2 border-purple-300 dark:border-purple-600"/>
          <div>
            <h3 class="text-lg font-bold text-purple-700 dark:text-purple-300">Jane Doe</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">@janedoe</p>
          </div>
        </div>
        <div class="flex justify-between">
          <div class="text-center">
            <p class="text-2xl font-bold text-blue-500 dark:text-blue-300">1.2k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-green-500 dark:text-green-300">3.4k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-pink-500 dark:text-pink-300">5.6k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Likes</p>
          </div>
        </div>
      </div>

      <!-- Trending Hashtags Chart -->
      <div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4">
        <h4 class="text-purple-700 dark:text-purple-300 font-semibold mb-4">Trending Hashtags</h4>
        <ul class="space-y-4">
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#RetroVibes</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">68%</span>
            </div>
            <div class="w-full bg-purple-200 dark:bg-purple-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-purple-400 dark:group-hover:bg-purple-500 transition-all duration-300 bg-purple-500 dark:bg-purple-300 h-2"
                   style="width: 68%"></div>
            </div>
          </li>
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#VintageStyle</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">54%</span>
            </div>
            <div class="w-full bg-yellow-200 dark:bg-yellow-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-yellow-400 dark:group-hover:bg-yellow-500 transition-all duration-300 bg-yellow-500 dark:bg-yellow-300 h-2"
                   style="width: 54%"></div>
            </div>
          </li>
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#Nostalgia</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">42%</span>
            </div>
            <div class="w-full bg-pink-200 dark:bg-pink-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-pink-400 dark:group-hover:bg-pink-500 transition-all duration-300 bg-pink-500 dark:bg-pink-300 h-2"
                   style="width: 42%"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Illustrative Image -->
    <div class="mt-6">
      <img src="https://picsum.photos/800/200?random=2" alt="Infographic illustration"
           class="w-full h-48 object-cover rounded-lg shadow-inner transition-transform duration-300 hover:scale-105"/>
    </div>
  </div>
</div>

Composant Infographie

Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre

Ouvrir Aperçu

                <div class="container mx-auto py-12 px-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Infographic Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-blue-500 dark:bg-blue-700 rounded-full p-3">
            <svg class="h-6 w-6 text-white" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.493-3.577L3 16"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Completion</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Completed 95% of projects on time within the last year, ensuring client satisfaction and timely delivery.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="w-full bg-gray-300 rounded-full h-2 dark:bg-gray-600">
          <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
        </div>
      </div>
    </div>

    <!-- Infographic Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-teal-500 dark:bg-teal-700 rounded-full p-3">
            <svg class="h-6 w-6 text-white" 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="M13 7L6 14l-3-3m0 0l3-3m0 0l3 3m7 0l-3 3m0 0l3 3m0 0l-3-3m3 3l-3-3"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Skills Acquired</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Successfully integrated three new key skills into my workflow, enhancing versatility and project outcomes.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
          <span>Skill 1</span>
          <span>Advanced</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Skill 2</span>
          <span>Intermediate</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Skill 3</span>
          <span>Proficient</span>
        </div>
      </div>
    </div>

    <!-- Infographic Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-orange-500 dark:bg-orange-700 rounded-full p-3">
            <svg class="h-6 w-6 text-white" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m6-2v2m0-2a2 2 0 100 4m0-4a2 2 0 110 4m0 4v2"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Client Satisfaction</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Achieved a 90% positive feedback rate from clients, demonstrating strong communication and project management.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="flex items-center justify-betweentext-gray-600 dark:text-gray-300">
          <span>Positive Feedback</span>
          <span>90%</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Neutral Feedback</span>
          <span>8%</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Negative Feedback</span>
          <span>2%</span>
        </div>
      </div>
    </div>

  </div>
</div>

Composant Infographie

Composant Infographie - Interface utilisateur en mode sombre avec niveaux de gris et conception complexe. Réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Stats Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Completed Projects:</div>
          <div class="text-white font-bold">50+</div>
        </div>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Client Satisfaction:</div>
          <div class="text-white font-bold">100%</div>
        </div>
        <div class="flex items-center">
          <div class="text-gray-400 mr-2">Years of Experience:</div>
          <div class="text-white font-bold">10+</div>
        </div>
      </div>

      <!-- Skills Distribution Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
        <div class="mb-4 border-b border-gray-700 pb-4">
          <p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">John Smith</div>
          </div>
        </div>
        <div>
          <p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">Jane Doe</div>
          </div>
        </div>
      </div>

      <!-- Project Showcase Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
        <h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Alpha</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Beta</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Gamma</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>