Infographics

Infographics Component

A complex, responsive Infographics Component for business websites, designed with a Skeuomorphism style and a vibrant color scheme using Tailwind CSS. Includes dark mode support and interactive elements.

Open Preview

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

Infographics Component

Complex Infographics Component with Neumorphism design, complementary color scheme, responsive and dark mode support, for Business/Corporate purpose, using Tailwind CSS.

Open Preview

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

Infographics Component

A complex Infographics Component with a Skeuomorphism design style and a Vibrant color scheme, suitable for e-commerce platforms. It is responsive and supports dark mode using Tailwind CSS. It displays various product statistics with interactive elements.

Open Preview

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

Infographics Component

A responsive Infographics Component with 3D design elements, pastel color scheme, and moderate complexity for dashboards, with dark mode support. No JavaScript, only HTML with Tailwind CSS.

Open Preview

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

Retro Vintage Infographics Component

A responsive, pastel-colored, retro/vintage style social media infographics dashboard component built with Tailwind CSS, featuring user profile stats, trending hashtag bar chart, and an illustrative image. Includes dark mode support via Tailwind's dark: prefix and interactive hover animations (no JavaScript required).

Open Preview

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

Infographics Component

Infographics Component for portfolio - Material Design, Analogous color scheme, Moderate complexity, Responsive, Dark theme support

Open Preview

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

Infographics Component

Infographics Component - Dark Mode UI with Grayscale and Complex design. Responsive with dark theme support.

Open Preview

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

RetroInfographicsComponent

A responsive infographics component with a retro/vintage design, pastel color scheme, and dark mode support. Uses Tailwind CSS for styling and includes multiple interactive elements for a complex interface suitable for blogs and content consumption. Includes a timeline, progress bars, charts, and a call to action, all styled with 80s/90s aesthetics and pastel colors. Uses random images from picsum.photos and randomuser.me for avatars.

Open Preview

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

Retro Infographic

A simple, responsive retro/vintage infographic component for portfolios with dark mode support. Uses a complementary color scheme and minimal elements.

Open Preview

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

Infographics Component

A responsive 3D infographic component designed for social media interfaces with vibrant colors and dark theme support, incorporating three-dimensional elements for depth and engagement.

Open Preview

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

Categories