Infographies

Composant Infographie

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

RetroInfographicsComposant

Un composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs pastel et une prise en charge du mode sombre. Utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs pour une interface complexe adaptée aux blogs et à la consommation de contenu. Comprend une chronologie, des barres de progression, des graphiques et un appel à l’action, le tout avec une esthétique des années 80/90 et des couleurs pastel. Utilise des images aléatoires de picsum.photos et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl text-center text-gray-800 dark:text-white mb-12 uppercase tracking-wide">Digital Voyage: An Infographic</h1>

    </div>

  </div>
</div>

Infographie rétro

Un composant infographique rétro/vintage simple et réactif pour les portfolios avec prise en charge du mode sombre. Utilise une palette de couleurs complémentaires et des éléments minimaux.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 md:p-12 font-sans">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">My Infographic</h2>
    
    <div class="flex flex-wrap -mx-4">
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Alpha and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Beta and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Gamma</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Gamma and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

Composant Infographie

Un composant d’infographie 3D réactif conçu pour les interfaces de médias sociaux avec des couleurs vives et une prise en charge des thèmes sombres, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

Catégories