Search Components

Data Visualization Components

Components that visualize data in graphical format

Dark Mode Data Visualization Component

A complex, responsive data visualization component designed with a dark monochromatic theme. Features multiple interactive visualization elements including a line chart, bar chart, and data cards. Includes hover effects and uses Tailwind's dark mode support. Suitable for blogs and content consumption platforms.

Open Preview

                <!-- Dark Mode Data Visualization Component -->
<div class="w-full bg-gray-900 text-gray-100 p-4 md:p-6 rounded-xl shadow-xl">
  <!-- Header with title and filter options -->
  <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold text-gray-100">Analytics Dashboard</h2>
      <p class="text-gray-400 mt-1">Performance metrics for last quarter</p>
    </div>
    
    <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Daily
      </button>
      <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-indigo-500">
        Weekly
      </button>
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Monthly
      </button>
    </div>
  </div>
  
  <!-- Stats Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Pageviews -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Pageviews</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+24%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">152.4K</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 75%"></div>
      </div>
    </div>
    
    <!-- Bounce Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Bounce Rate</h3>
        <span class="bg-red-900/30 text-red-400 text-xs py-1 px-2 rounded-full">+2.1%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">38.2%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 38%"></div>
      </div>
    </div>
    
    <!-- Avg. Time on Site -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Avg. Session</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+12%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">4m 38s</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 65%"></div>
      </div>
    </div>
    
    <!-- Conversion Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Conversion</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+7.3%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">5.4%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 54%"></div>
      </div>
    </div>
  </div>
  
  <!-- Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Line Chart -->
    <div class="bg-gray-800 p-4 rounded-lg col-span-2">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">User Growth</h3>
        <div class="flex space-x-2">
          <span class="inline-block w-3 h-3 bg-indigo-500 rounded-full"></span>
          <span class="text-sm text-gray-400">New Users</span>
          <span class="inline-block w-3 h-3 bg-gray-500 rounded-full ml-2"></span>
          <span class="text-sm text-gray-400">Returning</span>
        </div>
      </div>
      
      <!-- Simplified Line Chart (CSS only) -->
      <div class="relative h-64 w-full">
        <div class="absolute bottom-0 left-0 w-full h-px bg-gray-700"></div>
        <div class="absolute left-0 top-0 h-full w-px bg-gray-700"></div>
        
        <!-- Y-axis labels -->
        <div class="absolute -left-6 top-0 text-gray-400 text-xs">100%</div>
        <div class="absolute -left-6 top-1/4 text-gray-400 text-xs">75%</div>
        <div class="absolute -left-6 top-2/4 text-gray-400 text-xs">50%</div>
        <div class="absolute -left-6 top-3/4 text-gray-400 text-xs">25%</div>
        <div class="absolute -left-6 bottom-0 text-gray-400 text-xs">0%</div>
        
        <!-- X-axis labels -->
        <div class="absolute bottom-[-20px] left-[12.5%] text-gray-400 text-xs">Jan</div>
        <div class="absolute bottom-[-20px] left-[37.5%] text-gray-400 text-xs">Feb</div>
        <div class="absolute bottom-[-20px] left-[62.5%] text-gray-400 text-xs">Mar</div>
        <div class="absolute bottom-[-20px] left-[87.5%] text-gray-400 text-xs">Apr</div>
        
        <!-- Line chart shape (CSS only approximation) -->
        <div class="absolute bottom-0 left-0 w-full h-full overflow-hidden">
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid lines -->
            <line x1="0" y1="15" x2="100" y2="15" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="30" x2="100" y2="30" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="45" x2="100" y2="45" stroke="#374151" stroke-width="0.2"/>
            <line x1="25" y1="0" x2="25" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="50" y1="0" x2="50" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="75" y1="0" x2="75" y2="60" stroke="#374151" stroke-width="0.2"/>
            
            <!-- Chart line 1 -->
            <polyline 
              points="0,40 25,30 50,20 75,15 100,10"
              fill="none"
              stroke="#6366F1"
              stroke-width="2"
            />
            
            <!-- Chart line 2 -->
            <polyline 
              points="0,50 25,40 50,45 75,35 100,30"
              fill="none"
              stroke="#9CA3AF"
              stroke-width="2"
            />
            
            <!-- Data points for line 1 -->
            <circle cx="0" cy="40" r="1.5" fill="#6366F1"/>
            <circle cx="25" cy="30" r="1.5" fill="#6366F1"/>
            <circle cx="50" cy="20" r="1.5" fill="#6366F1"/>
            <circle cx="75" cy="15" r="1.5" fill="#6366F1"/>
            <circle cx="100" cy="10" r="1.5" fill="#6366F1"/>
            
            <!-- Data points for line 2 -->
            <circle cx="0" cy="50" r="1.5" fill="#9CA3AF"/>
            <circle cx="25" cy="40" r="1.5" fill="#9CA3AF"/>
            <circle cx="50" cy="45" r="1.5" fill="#9CA3AF"/>
            <circle cx="75" cy="35" r="1.5" fill="#9CA3AF"/>
            <circle cx="100" cy="30" r="1.5" fill="#9CA3AF"/>
          </svg>
        </div>
      </div>
    </div>
    
    <!-- Bar Chart -->
    <div class="bg-gray-800 p-4 rounded-lg">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">Traffic Sources</h3>
        <button class="text-gray-400 hover:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
          </svg>
        </button>
      </div>
      
      <!-- Simplified Bar Chart (CSS only) -->
      <div class="relative h-64 mt-4 flex items-end justify-around">
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 65%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Direct</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 85%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Social</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 40%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Email</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 95%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Search</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 50%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Ads</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Popular Content Section -->
  <div class="bg-gray-800 p-4 rounded-lg mb-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-100">Popular Content</h3>
      <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 rounded-md text-sm transition-colors duration-200">View All</button>
    </div>
    
    <!-- Content Items -->
    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/1/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">10 Ways to Improve Your Data Analysis Skills</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>2.1K reads</span>
            <span class="mx-2">•</span>
            <span>8 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 80%"></div>
              </div>
              <span class="ml-1 text-xs">80%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/26/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Understanding User Behavior Through Analytics</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>1.8K reads</span>
            <span class="mx-2">•</span>
            <span>6 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 65%"></div>
              </div>
              <span class="ml-1 text-xs">65%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/60/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Data Visualization Principles for Beginners</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>3.4K reads</span>
            <span class="mx-2">•</span>
            <span>12 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 92%"></div>
              </div>
              <span class="ml-1 text-xs">92%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Footer with user info -->
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-100">Report generated by James Wilson</p>
        <p class="text-xs text-gray-400">Last updated: April 15, 2023 at 14:30</p>
      </div>
    </div>
    <div class="mt-4 md:mt-0 flex space-x-2">
      <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        Download PDF
      </button>
      <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
        Share Report
      </button>
    </div>
  </div>
</div>

Data Visualization Components Component

Glassmorphism Data Visualization Component for Blog/Content

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 min-h-screen flex items-center justify-center">
    <div class="max-w-7xl w-full mx-auto">
        <div class="glass rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
            <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Site Traffic Overview</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Traffic Source Breakdown -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Traffic Source Breakdown</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Pie Chart -->
                        <div class="w-32 h-32 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-pulse"></div>
                    </div>
                    <ul class="mt-4 space-y-2 text-gray-800 dark:text-gray-200">
                        <li>Direct: <span class="font-semibold">35%</span></li>
                        <li>Search Engines: <span class="font-semibold">45%</span></li>
                        <li>Referral: <span class="font-semibold">15%</span></li>
                        <li>Social Media: <span class="font-semibold">5%</span></li>
                    </ul>
                </div>

                <!-- Page Views Over Time -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Page Views Over Time</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Line Chart -->
                        <div class="w-full h-32 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 animate-pulse"></div>
                    </div>
                    <div class="mt-4 text-center text-gray-800 dark:text-gray-200">
                        Daily Average: <span class="font-semibold">1,200</span>
                    </div>
                </div>
            </div>

            <!-- Popular Articles -->
            <div class="glass rounded-xl p-6 md:p-8 mt-8 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Popular Articles</h3>
                <div class="space-y-4">

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=1" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">How to Master Tailwind CSS</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">5,400</span></p>
                        </div>
                    </div>

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=2" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Getting Started with Glassmorphism</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">3,800</span></p>
                        </div>
                    </div>

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

<style>
/* Add a basic glassmorphism effect using a pseudo-element or backdrop-filter */
.glass {
    /* Example glassmorphism styles */
    /* The backdrop-filter and background-color with opacity are key */
    /* backdrop-filter: blur(10px); */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}
</style>

Data Visualization Components Component

A responsive, dark-mode compatible data visualization component for blogs, featuring a retro/vintage design with a complementary color scheme and complex interactive elements.

Open Preview

                <div class="bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200 p-8 font-sans">
  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold text-indigo-700 dark:text-teal-400">Data Insights</h1>
      <div class="flex items-center">
        <span class="mr-4">Theme:</span>
        <button class="px-3 py-1 rounded bg-indigo-700 text-white dark:bg-teal-400 dark:text-gray-900" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Chart Area -->
      <section class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-teal-400">Sales Performance</h2>
        <!-- Placeholder for a complex chart - In a real scenario, this would be an SVG or canvas element -->
        <div class="h-64 bg-gray-300 dark:bg-gray-600 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
          [ Complex Chart Placeholder ]
        </div>
        <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
          <p>Detailed sales data visualization would appear here.</p>
        </div>
      </section>

      <!-- Metrics and Details -->
      <section class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Metric Card 1 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">Total Revenue</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">$150,000</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">+12% from last month</p>
        </div>

        <!-- Metric Card 2 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">New Users</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">3,500</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">-5% from last month</p>
        </div>

        <!-- Details Card -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg col-span-full">
          <h3 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-teal-400">Recent Activity</h3>
          <ul class="text-sm text-gray-700 dark:text-gray-300">
            <li class="mb-2">New order #1012 placed</li>
            <li class="mb-2">User

Data Visualization Components Component

A simple data visualization component designed for e-commerce, featuring a dark mode interface with vibrant colors.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Sales Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Sales</h3>
            <p class="text-3xl text-violet-500">$12,345</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Orders</h3>
            <p class="text-3xl text-green-400">150</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Customers</h3>
            <p class="text-3xl text-blue-400">80</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Average Order Value</h3>
            <p class="text-3xl text-yellow-400">$82.30</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Recent Orders</h3>
        <ul class="list-disc list-inside mt-2">
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>John Doe</span>
                </div>
                <span class="text-violet-400">$120.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Jane Smith</span>
                </div>
                <span class="text-green-400">$85.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Emily Johnson</span>
                </div>
                <span class="text-blue-400">$96.00</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Sales Chart</h3>
        <img src="https://picsum.photos/400/200" alt="Sales Chart" class="mt-2 rounded-lg">
    </div>
</div>

Data Visualization Components

A simple, responsive e-commerce data visualization component with a glassmorphism design style and monochromatic color scheme, featuring dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
        <h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
            </div>
        </div>
        <div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
            <h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
                <div class="ml-4">
                    <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
                </div>
            </div>
        </div>
    </div>
</div>

Data Visualization Components

A retro vintage styled data visualization dashboard component with a dark theme that features earth tones and a simple layout.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">User Statistics</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">Sales Overview</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
        </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
        <h2 class="text-xl text-green-200">Recent Activity</h2>
        <ul class="text-gray-300 dark:text-gray-400">
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User1 logged in</span>
            </li>
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User2 made a purchase</span>
            </li>
            <li class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User3 logged out</span>
            </li>
        </ul>
    </div>
</div>

Data Visualization Component

A responsive data visualization component designed in Material Design style with a pastel color scheme, suitable for showcasing portfolio work with dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

Neumorphism Data Visualization Component

Neumorphism-styled data visualization component for blog content, with a pastel color scheme, moderate complexity, responsiveness, and dark mode support.

Open Preview

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualization Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
  body { @apply bg-gray-200 dark:bg-gray-800 transition-colors duration-500; }
  .neumorphic-card { @apply rounded-2xl bg-gray-200 dark:bg-gray-800 shadow-xl dark:shadow-none transition-all duration-500;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-card {
    box-shadow: 7px 7px 15px #444444, -7px -7px 15px #b6b6b6;
  }
  .neumorphic-input { @apply rounded-xl bg-gray-200 dark:bg-gray-800 p-3 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition-all duration-500;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }
  .dark .neumorphic-input {
     box-shadow: inset 5px 5px 10px #444444, inset -5px -5px 10px #b6b6b6;
  }
  .pastel-blue { @apply text-blue-400 dark:text-blue-300; }
  .pastel-pink { @apply text-pink-400 dark:text-pink-300; }
  .pastel-green { @apply text-green-400 dark:text-green-300; }
</style>
</head>
<body class="p-6">

<div class="max-w-4xl mx-auto">

  <!-- Data Visualization Card -->
  <div class="neumorphic-card p-6 mb-8">
    <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Monthly Sales Overview</h2>

    <div class="flex flex-wrap -mx-3 mb-5">
      <!-- Metric 1 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-blue">1500</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Units Sold</div>
        </div>
      </div>
      <!-- Metric 2 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-pink">$75,000</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Revenue</div>
        </div>
      </div>
      <!-- Metric 3 -->
      <div class="w-full md:w-1/3 px-3">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-green">20%</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Growth Rate</div>
        </div>
      </div>
    </div>

    <!-- Placeholder for a simple chart (e.g., a bar chart represented with divs) -->
    <div class="mt-8">
      <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Sales by Category</h3>
      <div class="flex items-end h-40">
        <!-- Bar 1 -->
        <div class="flex-1 mx-2">
          <div class="bg-blue-300 dark:bg-blue-600 rounded-t-lg h-32" style="height: 80%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category A</div>
        </div>
        <!-- Bar 2 -->
        <div class="flex-1 mx-2">
          <div class="bg-pink-300 dark:bg-pink-600 rounded-t-lg h-24" style="height: 60%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category B</div>
        </div>
        <!-- Bar 3 -->
        <div class="flex-1 mx-2">
          <div class="bg-green-300 dark:bg-green-600 rounded-t-lg h-36" style="height: 90%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category C</div>
        </div>
           <!-- Bar 4 -->
        <div class="flex-1 mx-2">
          <div class="bg-yellow-300 dark:bg-yellow-600 rounded-t-lg h-20" style="height: 50%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category D</div>
        </div>
      </div>
    </div>

  </div>

  <!-- Example of another component: Search Bar -->
  <div class="neumorphic-card p-6">
    <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Filter Data</h3>
    <input type="text" placeholder="Search..." class="neumorphic-input w-full text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400">
  </div>

</div>

</body>
</html>

Data Visualization Components

A complex dashboard data visualization component with retro/vintage aesthetic and complementary color schemes.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
    <h1 class="text-3xl font-bold mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-red-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">User Statistics</h2>
            <p class="text-lg">Total Users: 1,200</p>
            <p class="text-lg">Active: 850</p>
            <img src="https://picsum.photos/300/200?random=1" alt="User Stats" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-blue-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Sales Overview</h2>
            <p class="text-lg">Total Sales: $20,000</p>
            <p class="text-lg">Monthly Growth: 15%</p>
            <img src="https://picsum.photos/300/200?random=2" alt="Sales Overview" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Performance Goals</h2>
            <p class="text-lg">Gained 300 New Users</p>
            <p class="text-lg">Target Achieved: 95%</p>
            <img src="https://picsum.photos/300/200?random=3" alt="Performance Goals" class="mt-4 rounded-lg" />
        </div>
    </div>
    <div class="mt-6 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-xl font-semibold">Recent Activities</h2>
        <ul class="list-disc list-inside">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> John Doe added a new item</li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Mike Smith reached 1,000 sales</li>
            <li><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Alex Johnson updated their profile</li>
        </ul>
    </div>
</div>

Data Visualization Components

Neumorphism styled data visualization components for a portfolio with dark theme support

Open Preview

                <div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
      <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
    </div>
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
      <img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
    </div>
    <!-- Profile Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
      <div class="flex items-center mb-3">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-semibold">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
    </div>
  </div>
</div>

Search Components

Categories

Data Visualization Components