Components Infographics Retro Infographic

Retro Infographic

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

Preview

HTML Code

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

Related Components

Neumorphic E-commerce Infographics Component

A simple, responsive neumorphic infographic component for e-commerce, using an analogous color scheme and supporting dark mode.

Open

Infographics Component

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

Open

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