Search Components

Infographics

Visual representations of information or data

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>

Infographics Component

A simple Infographics component designed with a 3D aesthetic, using pastel colors for social media interfaces, with dark mode support.

Open Preview

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

Infographics Component

A neumorphic infographics component with earth tones inspired by soil, trees, and landscapes. It features a soft UI style with moderate complexity for business/corporate use. The design is responsive and supports dark themes using Tailwind CSS.

Open Preview

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

Infographics Component

A simple infographics component designed with Neumorphism style and a Pastel color scheme. It displays a profile card and basic statistics in a visually appealing layout suitable for business or corporate websites.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
    <div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
        <img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
    <p class="text-gray-600 dark:text-gray-400">CEO, Company XYZ</p>
    <div class="mt-4 flex justify-between w-full">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
    </div>
</div>

Infographics Component

Infographics Component with Neumorphism style, Grayscale color scheme, Simple layout, for Dashboard purpose, Responsive with Dark Theme support

Open Preview

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

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

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

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

Infographics Component

A simple, responsive infographics component with 3D design elements and an analogous color scheme for blog/content use. It includes dark theme support using Tailwind CSS.

Open Preview

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

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

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

Infographics Component

A responsive Infographics component designed in a skeuomorphic style using Tailwind CSS with dark theme support. It mimics real-world elements to display information visually.

Open Preview

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

Infographics Component

Infographics Component with Brutalism style, high contrast, unusual layout, responsive with dark mode support using tailwind css

Open Preview

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

Search Components

Categories

Infographics