Search Components

Charts

Visual representation of data using graphs

Cyberpunk Chart Component - Government/Public

A moderately complex chart component with cyberpunk aesthetics, suitable for government and public service websites. Features a dark background, bright neon accents, and a retro/vintage color palette. Responsive and includes dark mode support.

Open Preview

                <div class="font-mono text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black rounded-lg shadow-xl overflow-hidden border-2 border-purple-700 dark:border-teal-400 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-purple-600 dark:border-teal-500 flex flex-col sm:flex-row justify-between items-start sm:items-center">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-300 tracking-wider mb-2 drop-shadow-[0_0_5px_rgba(252,211,77,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_5px_rgba(45,212,191,0.7)]">Public Service Metrics</h2>
        <p class="text-purple-300 dark:text-gray-400 text-sm sm:text-base">Real-time data visualization for key public indicators.</p>
      </div>
      <div class="mt-4 sm:mt-0 flex gap-2">
        <button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white dark:bg-teal-600 dark:hover:bg-teal-700 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105 shadow-md border-2 border-purple-400 dark:border-teal-500">View Details</button>
        <button class="px-4 py-2 bg-transparent border-2 border-yellow-300 text-yellow-300 hover:bg-yellow-300 hover:text-purple-900 dark:border-teal-400 dark:text-teal-400 dark:hover:bg-teal-400 dark:hover:text-gray-900 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105">Export Data</button>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Chart 1: Bar Chart Placeholder -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Citizen Engagement Index</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md flex items-end overflow-hidden border border-purple-600 dark:border-teal-500">
          <div class="w-1/5 bg-yellow-400 h-3/4 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">75%</span></div>
          <div class="w-1/5 bg-yellow-400 h-2/3 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">68%</span></div>
          <div class="w-1/5 bg-yellow-400 h-4/5 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">82%</span></div>
          <div class="w-1/5 bg-yellow-400 h-1/2 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">50%</span></div>
          <div class="w-1/5 bg-yellow-400 h-full rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">90%</span></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Avg</span>
        </div>
      </div>

      <!-- Chart 2: Line Chart Placeholder with Data Points -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Service Request Trend</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md relative border border-purple-600 dark:border-teal-500">
          <!-- Grid lines -->
          <div class="absolute inset-0 grid grid-rows-4 grid-cols-6 opacity-30 text-purple-400 dark:text-gray-500">
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full"></div>
          </div>
          <!-- Line path placeholders -->
          <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#FCD34D" />
                <stop offset="100%" stop-color="#8B5CF6" />
              </linearGradient>
              <linearGradient id="gradient1_dark" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#2DD4BF" />
                <stop offset="100%" stop-color="#6EE7B7" />
              </linearGradient>
            </defs>
            <polyline 
              points="0,80 20,40 40,60 60,30 80,50 100,20" 
              fill="none" 
              stroke="url(#gradient1)" 
              stroke-width="2" 
              class="dark:stroke-[url(#gradient1_dark)]"/>
            <!-- Data Points -->
            <circle cx="0" cy="80" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="20" cy="40" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="40" cy="60" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="60" cy="30" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="80" cy="50" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="100" cy="20" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
          </svg>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
        </div>
      </div>

      <!-- Key Performance Indicators -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Key Indicators</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Average Response Time</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">2h 15m</p>
            </div>
            <span class="text-green-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg> Good</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Citizen Satisfaction Avg</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">4.7 <span class="text-base font-normal">/ 5</span></p>
            </div>
            <span class="text-yellow-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
            </svg> Stable</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Active Users Monthly</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">1.2M+</p>
            </div>
            <span class="text-sky-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg> Growing</span>
          </div>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Recent System Activities</h3>
        <ul class="space-y-4">
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">System Admin</strong> updated 'Service Outage Protocol'. <span class="text-purple-400 dark:text-gray-500 text-xs">5 mins ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Data Analyst</strong> generated 'Q2 Performance Report'. <span class="text-purple-400 dark:text-gray-500 text-xs">1 hour ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Network Security</strong> detected 'Unusual Login Attempt'. <span class="text-red-400 dark:text-red-300 text-xs">3 hours ago</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-purple-600 dark:border-teal-500 text-center text-purple-400 dark:text-gray-500 text-xs sm:text-sm">
      &copy; 2077 Public Data Systems. All rights reserved. Data refreshed every 30 seconds.
    </div>
  </div>
  <style>
    .shadow-neon {
      box-shadow: 0 0 5px rgba(252, 211, 77, 0.7), 0 0 10px rgba(252, 211, 77, 0.4), 0 0 15px rgba(252, 211, 77, 0.2);
    }
    .dark .shadow-neon {
      box-shadow: 0 0 5px rgba(45, 212, 191, 0.7), 0 0 10px rgba(45, 212, 191, 0.4), 0 0 15px rgba(45, 212, 191, 0.2);
    }
    /* Custom placeholder for bar chart values to be readable on bars */
    .w-1\/5 span {
        font-size: 0.75rem; /* 12px */
        transform: translateY(-0.75rem); /* Adjust position if needed */
        position: relative;
        width: 100%;
        text-align: center;
    }
  </style>
</div>

Charts Component

A complex, responsive charts component with a Neon/Electric color scheme, inspired by Material Design for CRM/Business Tools. Includes multiple interactive elements and full dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-teal-400 mb-2 sm:mb-0">Analytics Dashboard</h1>
    <div class="flex space-x-2">
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
        Today
      </button>
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-700 text-white shadow-xl transform hover:scale-105 transition duration-300 ease-in-out dark:bg-teal-500 dark:hover:bg-teal-600">
        Last 7 Days
      </button>
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
        Last 30 Days
      </button>
    </div>
  </div>

  <!-- Key Metrics Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

    <!-- Sales Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-blue-500 dark:border-blue-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Sales</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">$12,345</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+5.2%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-blue-500 dark:text-blue-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V9h2v8zm4 0h-2V7h2v10z"/>
        </svg>
      </div>
    </div>

    <!-- Customers Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-pink-500 dark:border-pink-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">New Customers</h3>
        <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-400">893</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-red-500 rotate-180" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-red-500 font-medium">-1.8%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-pink-500 dark:text-pink-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.38 0 2.5 1.12 2.5 2.5S13.38 10.5 12 10.5 9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08s5.97 1.09 6 3.08c-1.29 1.94-3.5 3.22-6 3.22z"/>
        </svg>
      </div>
    </div>

    <!-- Revenue Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-lime-500 dark:border-lime-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Revenue</h3>
        <p class="text-4xl font-extrabold text-lime-600 dark:text-lime-400">$34,567</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+7.1%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-lime-500 dark:text-lime-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H9.5L12 5l2.5 8H13v6z"/>
        </svg>
      </div>
    </div>

    <!-- Retention Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-purple-500 dark:border-purple-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Customer Retention</h3>
        <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-400">92%</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+0.5%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-purple-500 dark:text-purple-600 opacity-75" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.75 0-1.4-.24-1.92-.64C9.56 16.03 8.86 15 8.16 15c-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64C3.81 17 3 16.19 3 15.19 3 9.79 7.79 5 12 5s9 4.79 9 10.19c0 1.01-.81 1.81-1.81 1.81-.75 0-1.4-.24-1.92-.64-.52-.4-1.22-1.36-1.92-1.36-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64z"/>
        </svg>
      </div>
    </div>
  </div>

  <!-- Main Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Sales Overview Chart -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sales Performance Overview</h2>
      <div class="flex items-center justify-end space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
        <label for="sales-period" class="sr-only">Select Period</label>
        <select id="sales-period" class="bg-gray-100 dark:bg-gray-700 rounded-lg py-1 px-2 focus:ring-2 focus:ring-blue-500 dark:focus:ring-teal-400 outline-none">
          <option>Daily</option>
          <option selected>Weekly</option>
          <option>Monthly</option>
          <option>Yearly</option>
        </select>
        <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"><span class="sr-only">Download</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414zM10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg></button>
      </div>
      
      <!-- Placeholder for a more complex chart (e.g., using an SVG or canvas library like Chart.js) -->
      <div class="flex-grow flex items-center justify-center bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 h-64 lg:h-80">
        <div class="w-full h-full relative">
          <!-- Example simple SVG line chart -->
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid Lines -->
            <line x1="10" y1="50" x2="90" y2="50" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="40" x2="90" y2="40" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="30" x2="90" y2="30" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="20" x2="90" y2="20" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="10" x2="90" y2="10" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>

            <!-- Data Line 1 (Sales) -->
            <polyline points="10,45 25,25 40,35 55,15 70,20 85,10 90,5" fill="none" stroke="#3b82f6" stroke-width="2.5" class="dark:stroke-blue-400"/>
            <circle cx="10" cy="45" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="25" cy="25" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="40" cy="35" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="55" cy="15" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="70" cy="20" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="85" cy="10" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="90" cy="5" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>

            <!-- Data Line 2 (Orders) -->
            <polyline points="10,50 25,40 40,48 55,38 70,45 85,30 90,25" fill="none" stroke="#ec4899" stroke-width="2.5" class="dark:stroke-pink-400"/>
            <circle cx="10" cy="50" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="25" cy="40" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="40" cy="48" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="55" cy="38" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="70" cy="45" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="85" cy="30" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="90" cy="25" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>

            <!-- X-axis labels (simplified) -->
            <text x="10" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Mon</text>
            <text x="30" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Tue</text>
            <text x="50" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Wed</text>
            <text x="70" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Thu</text>
            <text x="90" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Fri</text>
          </svg>
           <div class="absolute bottom-2 left-6 text-xs text-gray-500 dark:text-gray-400">
            <div class="flex items-center mb-1">
              <span class="inline-block w-3 h-3 rounded-full mr-2 bg-blue-500 dark:bg-blue-400"></span> Sales
            </div>
            <div class="flex items-center">
              <span class="inline-block w-3 h-3 rounded-full mr-2 bg-pink-500 dark:bg-pink-400"></span> Orders
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Top Products Chart/List -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Top Selling Products</h2>
      
      <!-- Example Doughnut/Pie Chart Placeholder -->
      <div class="flex-shrink-0 flex items-center justify-center p-4 h-64 lg:h-auto lg:flex-grow bg-gray-50 dark:bg-gray-900 rounded-lg mb-4">
        <div class="w-48 h-48 rounded-full bg-gradient-to-br from-teal-400 via-blue-500 to-indigo-500 flex items-center justify-center text-white text-lg font-bold shadow-inner dark:from-teal-500 dark:via-blue-600 dark:to-indigo-600">
          <span class="font-extrabold text-2xl">65%</span>
          <span class="absolute text-xs bottom-12">Product A</span>
        </div>
      </div>

      <ul class="space-y-3">
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-blue-500 dark:text-blue-400 font-semibold">Product A</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">$5,100</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-pink-500 dark:text-pink-400 font-semibold">Product B</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">$3,200</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-lime-500 dark:text-lime-400 font-semibold">Product C</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-lime-100 dark:bg-lime-900 text-lime-800 dark:text-lime-200">$2,045</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-purple-500 dark:text-purple-400 font-semibold">Product D</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">$1,560</span>
        </li>
      </ul>
    </div>

    <!-- Customer Segment Chart -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Customer Segments</h2>
       <div class="flex-shrink-0 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg mb-4 h-64 lg:h-auto lg:flex-grow">
        <div class="w-full h-full relative">
          <!-- Example Simple Bar Chart -->
          <div class="absolute bottom-0 left-0 w-full h-full flex items-end justify-around pb-2">
            <div class="flex flex-col items-center">
              <div class="bg-purple-500 dark:bg-purple-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 80%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">New</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-blue-500 dark:bg-blue-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 95%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Active</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-pink-500 dark:bg-pink-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 60%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Churned</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-lime-500 dark:bg-lime-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 45%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Loyal</p>
            </div>
          </div>
        </div>
      </div>
      <ul class="space-y-3">
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>New Leads</span>
          <span class="font-bold text-lg text-purple-600 dark:text-purple-400">1,234</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Active Users</span>
          <span class="font-bold text-lg text-blue-600 dark:text-blue-400">5,678</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Churn Rate</span>
          <span class="font-bold text-lg text-pink-600 dark:text-pink-400">15%</span>
        </li>
         <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Loyalty Score</span>
          <span class="font-bold text-lg text-lime-600 dark:text-lime-400">8.9</span>
        </li>
      </ul>
    </div>

    <!-- Recent Activities Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Activities</h2>
      <div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
        <ul class="space-y-4">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Closed <span class="text-blue-500 dark:text-blue-400 font-semibold">#CRM-1234</span> deal for <span class="font-semibold">$5000</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">1 hour ago</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Updated customer notes for <span class="text-pink-500 dark:text-pink-400 font-semibold">Alice Johnson</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">3 hours ago</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">David Lee</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Sent a follow-up email to <span class="text-lime-500 dark:text-lime-400 font-semibold">Bob Williams</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">Yesterday</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sarah Chen</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Created new task: <span class="text-purple-500 dark:text-purple-400 font-semibold">Onboard new client ABC Corp</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">2 days ago</time>
            </div>
          </li>
           <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Michael Brown</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Logged call with <span class="text-blue-500 dark:text-blue-400 font-semibold">XYZ Solutions</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">3 days ago</time>
            </div>
          </li>
           <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Completed task: <span class="text-pink-500 dark:text-pink-400 font-semibold">Prepare Q3 report</span></p>
              <time class="text-xs text-gray-400 darker:text-gray-500">4 days ago</time>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Upcoming Tasks/Meetings -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Upcoming Schedule</h2>
      <div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
        <ul class="space-y-4">
          <li class="border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Meeting with Acme Corp</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Today, 2:00 PM - 3:00 PM</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Lead: John Doe</p>
          </li>
          <li class="border-l-4 border-lime-500 dark:border-lime-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Prepare Q4 Sales Forecast</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Due: Tomorrow, 5:00 PM</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Assigned to: Jane Smith</p>
          </li>
          <li class="border-l-4 border-purple-500 dark:border-purple-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Client Pitch Deck Review</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Fri, Nov 17, 10:00 AM</p>
             <p class="text-xs text-gray-500 dark:text-gray-500">Participants: Sarah Chen, David Lee</p>
          </li>
          <li class="border-l-4 border-pink-500 dark:border-pink-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Team Sync Meeting</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Mon, Nov 20, 9:00 AM</p>
             <p class="text-xs text-gray-500 dark:text-gray-500">Location: Conference Room 3</p>
          </li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Contact Quick Access -->
  <div class="mt-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 transform transition-transform duration-300 hover:scale-[1.005]">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Quick Customer Access</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Alice Johnson</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Acme Corp</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-pink-400">Bob Williams</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Global Solutions</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-lime-600 dark:group-hover:text-lime-400">Carol Davis</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Innovate LLC</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Daniel Miller</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Quantum Tech</p>
        </div>
      </a>
       <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Eve Taylor</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Future Sols</p>
        </div>
      </a>
    </div>
  </div>

</div>

Neumorphic Charts Component

A complex, responsive charts component with a neumorphic design style and an analogous color scheme, suitable for a portfolio to showcase work or products. Includes dark mode support.

Open Preview

                <div class="min-h-screen p-6 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="container mx-auto px-4 py-8 max-w-6xl">

    <!-- Main Neumorphic Card Container -->
    <div class="bg-purple-100 dark:bg-gray-850 p-8 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-500 ease-in-out">

      <header class="mb-10 text-center">
        <h1 class="text-4xl font-extrabold text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">Portfolio Performance Overview</h1>
        <p class="text-lg text-purple-700 dark:text-purple-300">Visualize your progress with interactive, soft UI charts.</p>
      </header>

      <!-- Analytics Cards Section -->
      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">

        <!-- Card 1 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-red-300 dark:from-pink-600 dark:to-red-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.594l2.25-1.5m-6.003.468L18.75 7.5h-1.091c-.389 0-.711-.29-.757-.679A9.795 9.795 0 0014.25 2.25H6.05a4.5 4.5 0 00-4.5 4.5v11.751m12 0a4.5 4.5 0 00-4.5 4.5v.525A.75.75 0 0110.125 22.5h3.75a.75.75 0 01.75-.75V21a4.5 4.5 0 00-4.5-4.5h-.75%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-red-600 dark:text-red-400 mb-2">+12.5%</h3>
          <p class="text-md text-red-500 dark:text-red-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">Total Growth</p>
        </div>

        <!-- Card 2 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-indigo-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3 2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 8.588m.5 8.281V12.98c0-.5-.494-.954-.99-.954H10.99c-.494 0-.99.454-.99.954v3.291m0 0C6.183 17.11 4.5 14.773 4.5 12c0-3.14 0-5.657 0-5.657s1.517-2.333 4.5-2.333h6c2.983 0 4.5 2.333 4.5 2.333S19.5 8.86 19.5 12c0 2.773-1.683 5.11-4.5 5.991m0 0c-.863 1.096-2.094 1.761-3.497 1.761H12.5c-1.403 0-2.634-.665-3.497-1.761M12 4.5c2.983 0 4.5 2.333 4.5 2.333S16.035 7 12 7c-4.035 0-4.5-.167-4.5-.167S9.017 4.5 12 4.5zM12 19.5c-2.983 0-4.5-2.333-4.5-2.333S7.965 17 12 17c4.035 0 4.5.167 4.5.167S15.017 19.5 12 19.5z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">$12,345</h3>
          <p class="text-md text-indigo-500 dark:text-indigo-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Revenue This Month</p>
        </div>

        <!-- Card 3 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15 19.128a9.38 9.38 0 002.668.236 9.38 9.38 0 002.668-.236l.292-.096.002-.005.002-.006c.725-.24 1.25-.948 1.25-1.745V10.5h-.005a8.775 8.775 0 01-2.903-.787m-1.298.115a9.38 9.38 0 00-2.668-.236 9.38 9.38 0 00-2.668.236l-.292.096-.002.005-.002.006c-.725.24-1.25.948-1.25 1.745v7.5a.75.75 0 00.75.75H13.5c.294 0 .584-.047.863-.129.28-.08.548-.201.797-.367s.475-.386.678-.609.356-.475.46-.757.17-.6-.17-.999a.75.75 0 00-.75-.75h-1c-.414 0-.75-.336-.75-.75V12.75a.75.75 0 01.75-.75h1.5c.414 0 .75.336.75.75v5.006c.729.088 1.393.308 1.956.637l.11.066zM13.5 12h1.5M12 12v.75m-3-2.25H7.5A.75.75 0 006.75 12v7.5c0 .806.525 1.514 1.25 1.745l.002.006.002.005.292.096c1.09.362 2.21.547 3.333.547a11.95 11.95 0 003.497-.379V12.75A.75.75 0 0113.5 12h-.75V9.75a.75.75 0 00-.75-.75h-1.5a.75.75 0 00-.75.75v2.25zM7.5 12h1.5M12 4.5a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5zM21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">350+</h3>
          <p class="text-md text-purple-500 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">Projects Completed</p>
        </div>

        <!-- Card 4 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-red-300 to-pink-300 dark:from-red-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-pink-600 dark:text-pink-400 mb-2">98%</h3>
          <p class="text-md text-pink-500 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">Client Satisfaction</p>
        </div>

      </section>

      <!-- Main Chart Area -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        <!-- Line Chart (Placeholder) -->
        <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
          <h2 class="text-2xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">Overall Performance Trend</h2>
          <div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
            <img src="https://picsum.photos/1000/600?random=1" alt="Line Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
          <div class="mt-4 flex flex-wrap gap-2 text-sm text-purple-600 dark:text-purple-300">
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1M</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">3M</button>
            <button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">6M</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1Y</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">All</button>
          </div>
        </div>

        <!-- Bar Chart (Placeholder) -->
        <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
          <h2 class="text-2xl font-semibold mb-4 text-red-700 dark:text-red-400">Projects by Category</h2>
          <div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
            <img src="https://picsum.photos/1000/600?random=2" alt="Bar Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
          <div class="mt-4 flex flex-wrap gap-2 text-sm text-red-600 dark:text-red-300">
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Development</button>
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Design</button>
            <button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Marketing</button>
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Consulting</button>
          </div>
        </div>
      </div>

      <!-- Recent Activity Section -->
      <section class="mt-12">
        <h2 class="text-2xl font-semibold mb-6 text-pink-700 dark:text-pink-400">Recent Milestones & Activity</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

          <!-- Activity Item 1 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-purple-300 dark:border-purple-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Achieved <span class="font-semibold text-red-600 dark:text-red-400">5-star rating</span> on 'E-commerce Redesign' project.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">2 hours ago</p>
            </div>
          </div>

          <!-- Activity Item 2 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-pink-300 dark:border-pink-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">New client inquiry for <span class="font-semibold text-indigo-600 dark:text-indigo-400">'Mobile App Development'</span>.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">Yesterday</p>
            </div>
          </div>

          <!-- Activity Item 3 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-red-300 dark:border-red-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Released case study for <span class="font-semibold text-purple-600 dark:text-purple-400">'SaaS Platform UX improvements'</span>.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">3 days ago</p>
            </div>
          </div>

          <!-- Activity Item 4 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-indigo-300 dark:border-indigo-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Featured in 'Top 10 Frontend Developers' article.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">1 week ago</p>
            </div>
          </div>

        </div>
      </section>

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

<!-- Custom Styles for Neumorphism (consider adding to a CSS file for production) -->
<style>
  /* Light mode shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }
  .shadow-neumorphic-light-sm {
    box-shadow: 4px 4px 8px #d9d9d9, -4px -4px 8px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #cbcecb, inset -5px -5px 10px #ffffff;
  }

  /* Dark mode shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1b1e, -8px -8px 16px #2e3034;
  }
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 4px 4px 8px #1a1b1e, -4px -4px 8px #2e3034;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1b1e, inset -5px -5px 10px #2e3034;
  }

  /* Responsive aspect ratio */
  .aspect-w-16 {
    position: relative;
    width: 100%;
  }
  .aspect-h-9::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 9/16 for 16:9 aspect ratio */
  }
  .aspect-w-16 > *, .aspect-h-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Custom dark mode background color for deep neumorphism */
  .dark\:bg-gray-850 {
    background-color: #242629;
  }

  /* Custom light mode background colors for main container */
  .bg-gradient-to-br.from-purple-200.via-pink-200.to-red-200 {
    background-image: linear-gradient(to bottom right, #e9d5ff, #fbcfe8, #fecaca);
  }
</style>

Memphis_Finance_Charts_Component

A complex financial charts component inspired by Memphis Design, featuring bold colors, geometric shapes, and a neon/electric color scheme. It's fully responsive, supports dark mode, and is suitable for finance/banking interfaces.

Open Preview

                <div class="font-sans bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen text-gray-800 dark:text-gray-100 relative overflow-hidden">

  <!-- Memphis background elements (for visual interest) -->
  <div class="absolute top-0 left-0 w-48 h-48 bg-purple-400 dark:bg-purple-700 opacity-30 dark:opacity-20 rounded-full blur-3xl -ml-24 -mt-24"></div>
  <div class="absolute bottom-0 right-0 w-64 h-64 bg-yellow-300 dark:bg-yellow-600 opacity-30 dark:opacity-20 rounded-full blur-3xl -mr-32 -mb-32"></div>
  <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-pink-400 dark:bg-pink-700 opacity-30 dark:opacity-20 rounded-lg blur-xl -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
  <div class="absolute bottom-1/2 right-1/4 w-40 h-40 bg-teal-300 dark:bg-teal-600 opacity-20 dark:opacity-10 rounded-full blur-2xl translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-7xl mx-auto relative z-10">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-center drop-shadow-lg leading-tight" style="text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.2), 4px 4px 0px rgba(0, 0, 0, 0.1);">
      <span class="text-fuchsia-600 dark:text-fuchsia-400">F</span>inancial <span class="text-lime-500 dark:text-lime-300">P</span>erformance
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <!-- Main Overview Card -->
      <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-fuchsia-400 dark:border-fuchsia-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-24 h-24 bg-teal-300 dark:bg-teal-600 -mt-12 -mr-12 rounded-full opacity-20"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-lime-300 dark:bg-lime-600 -mb-16 -ml-16 rounded-lg opacity-20 transform rotate-12"></div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 relative z-10">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-50 drop-shadow">Portfolio Growth</h2>
          <div class="mt-4 sm:mt-0 flex space-x-2">
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 bg-fuchsia-100 dark:bg-fuchsia-800 transition-colors duration-200">6M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1Y</button>
          </div>
        </div>
        <div class="relative flex justify-center items-center h-64 md:h-80 bg-gradient-to-tr from-fuchsia-100 to-purple-100 dark:from-purple-900 dark:to-fuchsia-900 rounded-xl mb-6 overflow-hidden border-2 border-fuchsia-500 dark:border-fuchsia-700">
          <!-- Placeholder for Chart Image -->
          <img src="https://picsum.photos/800/400?random=1&grayscale&blur=2" alt="Placeholder chart" class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10 rounded-xl">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="w-full h-full border-2 border-dashed border-fuchsia-500 dark:border-fuchsia-300 rounded-lg flex flex-col justify-center items-center text-center p-4">
                <p class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 drop-shadow-md">+15.7%</p>
                <p class="text-lg sm:text-xl font-semibold text-gray-600 dark:text-gray-300">Total Return (6 Months)</p>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current Value</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$85,450</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Invested</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$73,800</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Daily Change</p>
            <p class="text-lg font-bold text-lime-600 dark:text-lime-300">+$345</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Asset Count</p>
            <p class="text-lg font-bold text-orange-600 dark:text-orange-300">12</p>
          </div>
        </div>
      </div>

      <!-- Top Holdings Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-lime-400 dark:border-lime-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-10 -ml-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Top Holdings</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Stock Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">NASDAQ 100</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">35% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+2.1%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="Crypto Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Bitcoin (BTC)</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">20% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+1.8%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Bond Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">US Treasury Bonds</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">15% of Portfolio</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-0.5%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=5" alt="Gold Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Gold ETF</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">10% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+0.9%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Recent Transactions & Risk Assessment -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Recent Transactions Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-purple-400 dark:border-purple-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mt-10 -mr-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Recent Activity</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-lime-200 dark:bg-lime-700 flex items-center justify-center text-lime-700 dark:text-lime-300 font-bold text-xl drop-shadow">↑</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Deposit</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">From Checking Account</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+$1,500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-red-200 dark:bg-red-700 flex items-center justify-center text-red-700 dark:text-red-300 font-bold text-xl drop-shadow">↓</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Withdrawal</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">To Savings Account</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-$500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-purple-200 dark:bg-purple-700 flex items-center justify-center text-purple-700 dark:text-purple-300 font-bold text-xl drop-shadow">📈</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Buy NASDAQ</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">100 Units</p>
            </div>
            <span class="ml-auto text-purple-600 dark:text-purple-300 font-bold">-$10,000</span>
          </li>
        </ul>
      </div>

      <!-- Risk Assessment Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-teal-400 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute bottom-0 right-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mb-12 -mr-12 rounded-lg opacity-20 transform -rotate-12"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Risk Assessment</h2>
        <div class="relative flex justify-center items-center h-48 bg-gradient-to-br from-teal-100 to-lime-100 dark:from-lime-900 dark:to-teal-900 rounded-xl mb-6 overflow-hidden border-2 border-teal-500 dark:border-teal-700">
          <img src="https://picsum.photos/600/300?random=6&grayscale&blur=2" alt="Placeholder risk chart" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 rounded-xl">
          <div class="relative z-10 flex flex-col items-center justify-center p-4">
            <p class="text-5xl font-extrabold text-teal-700 dark:text-teal-300 drop-shadow-md mb-2">Moderate</p>
            <p class="text-lg font-semibold text-gray-600 dark:text-gray-300 text-center">Your portfolio risk is currently balanced.</p>
            <a href="#" class="mt-4 inline-block px-5 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-full font-semibold hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors duration-200 shadow-md">View Details</a>
          </div>
        </div>

        <div class="p-4 bg-teal-50 dark:bg-teal-900 rounded-xl border-2 border-teal-300 dark:border-teal-600 relative z-10">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Your current risk score is <strong>4.5/10</strong>, primarily driven by your exposure to tech stocks. Consider diversifying further for optimal balance.
          </p>
        </div>
      </div>
    </div>

    <!-- Advisory Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-orange-400 dark:border-orange-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-12 -ml-12 rounded-full opacity-20"></div>
      <div class="absolute bottom-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mb-10 -mr-10 rounded-lg opacity-20 transform -rotate-45"></div>
      <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Expert Insights</h2>
      <div class="flex flex-col sm:flex-row items-center gap-6 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Financial Advisor" class="w-24 h-24 rounded-full border-4 border-orange-500 dark:border-orange-400 shadow-lg">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">"Market trends indicate potential for growth in renewable energy. Consider allocating a small portion of your portfolio."</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">— <span class="font-medium text-orange-600 dark:text-orange-300">Alex Chen, Senior Financial Advisor</span></p>
          <a href="#" class="mt-3 inline-block px-5 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 dark:from-orange-600 dark:to-yellow-600 text-white rounded-full font-semibold hover:from-orange-600 hover:to-yellow-600 dark:hover:from-orange-700 dark:hover:to-yellow-700 transition-colors duration-200 shadow-md">Schedule a Call</a>
        </div>
      </div>
    </div>
  </div>
</div>

Sports_Fitness_Charts_Component

A complex, responsive charts component for sports and fitness applications, featuring a clean, minimalist Swiss Typography design with a black and white base and a single accent color. Includes dark mode support and a grid-based layout for various data visualizations.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 sm:mb-10 lg:mb-12 border-b pb-4 sm:pb-6 border-accent dark:border-dark-accent">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 tracking-tight leading-tight mb-2 sm:mb-0">Performance Overview</h1>
    <div class="flex items-center space-x-2">
      <button class="px-4 py-2 text-sm sm:text-base font-semibold rounded-full bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
        Weekly
      </button>
      <button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        Monthly
      </button>
      <button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        Yearly
      </button>
    </div>
  </div>

  <!-- Main Grid Layout -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Chart 1: Activity Tracker - Large -->
    <div class="col-span-1 md:col-span-2 lg:col-span-2 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Activity Tracker</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Your weekly progress at a glance.</p>
      <div class="h-64 sm:h-80 md:h-96 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Line/Area Chart</span>
        <img src="https://picsum.photos/800/400?grayscale&random=1" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6 text-center">
        <div>
          <p class="text-2xl font-bold text-accent dark:text-dark-accent">12k</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Steps Today</p>
        </div>
        <div>
          <p class="text-2xl font-bold">560</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Calories Burned</p>
        </div>
        <div>
          <p class="text-2xl font-bold relative inline-flex items-baseline">
            7.2<span class="text-base font-normal ml-0.5">km</span>
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Distance Covered</p>
        </div>
        <div>
          <p class="text-2xl font-bold relative inline-flex items-baseline">
            85<span class="text-base font-normal ml-0.5">bpm</span>
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Avg. Heart Rate</p>
        </div>
      </div>
    </div>

    <!-- Chart 2: Performance Goals - Medium -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Performance Goals</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Track your progress towards set goals.</p>
      <div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Radar/Bar Chart</span>
        <img src="https://picsum.photos/400/300?grayscale&random=2" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 space-y-4">
        <div class="flex justify-between items-center text-sm">
          <span class="text-gray-700 dark:text-gray-300">Strength Training</span>
          <span class="font-semibold text-accent dark:text-dark-accent">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <div class="flex justify-between items-center text-sm">
          <span class="text-gray-700 dark:text-gray-300">Cardio Endurance</span>
          <span class="font-semibold text-accent dark:text-dark-accent">90%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 90%"></div>
        </div>
      </div>
    </div>

    <!-- Chart 3: Sleep Quality - Small -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Sleep Quality</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Rest is key to recovery.</p>
      <div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Pie/Donut Chart</span>
        <img src="https://picsum.photos/400/300?grayscale&random=3" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 text-center">
        <p class="text-4xl font-bold text-accent dark:text-dark-accent">7.5<span class="text-xl font-normal ml-1">hrs</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Average Sleep Last Night</p>
        <ul class="mt-4 text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <li class="flex justify-between items-center">
            <span>Deep Sleep:</span>
            <span class="font-semibold">2.1 hrs</span>
          </li>
          <li class="flex justify-between items-center">
            <span>REM Sleep:</span>
            <span class="font-semibold">1.8 hrs</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Light Sleep:</span>
            <span class="font-semibold">3.6 hrs</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Chart 4: Team Stats (if applicable) - Large horizontal -->
    <div class="col-span-1 md:col-span-2 lg:col-span-3 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Team Performance (Last 5 Games)</h2>
      <p class="text-sm text-gray-60:0 dark:text-gray-400 mb-6">A quick look at team's recent form.</p>
      <div class="h-56 sm:h-64 md:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Bar/Stacked Bar Chart</span>
        <img src="https://picsum.photos/1000/400?grayscale&random=4" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 text-center">
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 1</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 2</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 3</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 4</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 5</p>
        </div>
      </div>
    </div>

    <!-- Chart 5: Individual Records / Leaderboard -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Individual Leaderboard</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Top performers this week.</p>
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 1">
          <span class="text-lg font-bold text-accent dark:text-dark-accent w-8">1.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-accent dark:border-dark-accent" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">15,200 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+150</p>
        </li>
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 2">
          <span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">2.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">14,800 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+120</p>
        </li>
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 3">
          <span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">3.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Mike Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">13,500 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+100</p>
        </li>
      </ul>
      <button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        View All Rankings
      </button>
    </div>

    <!-- Chart 6: Hydration Tracker -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800 flex flex-col justify-between">
      <div>
        <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Hydration Tracker</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Stay hydrated for peak performance.</p>
        <div class="relative flex items-center justify-center">
          <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-5xl font-extrabold text-accent dark:text-dark-accent relative overflow-hidden">
            <span class="z-10">75%</span>
            <div class="absolute bottom-0 w-full bg-blue-400 dark:bg-blue-600 transition-all duration-500 ease-out" style="height: 75%;"></div>
          </div>
        </div>
        <p class="text-center mt-6 text-2xl font-bold text-gray-900 dark:text-gray-100">2.25L</p>
        <p class="text-center text-sm text-gray-600 dark:text-gray-400">of 3L Daily Goal</p>
      </div>
      <button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
        Log Water Intake
      </button>
    </div>

  </div>

  <!-- Footer/Disclaimer -->
  <div class="mt-12 text-center text-xs text-gray-500 dark:text-gray-400">
    <p>Disclaimer: Data shown is for illustrative purposes only and may not reflect real-time information.</p>
    <p class="mt-1">&copy; 2023 Fitness App. All rights reserved.</p>
  </div>

</div>

<style>
  /* Define CSS Variables for the accent color */
  :root {
    --accent-color: #EF4444; /* Tailwind red-500 */
    --dark-accent-color: #DC2626; /* Tailwind red-600 for dark mode, slightly darker */
  }
  .bg-accent {
    background-color: var(--accent-color);
  }
  .text-accent {
    color: var(--accent-color);
  }
  .border-accent {
    border-color: var(--accent-color);
  }

  .dark .bg-dark-accent {
    background-color: var(--dark-accent-color);
  }
  .dark .text-dark-accent {
    color: var(--dark-accent-color);
  }
  .dark .border-dark-accent {
    border-color: var(--dark-accent-color);
  }

  /* Dark mode background for subtle variation */
  .dark .bg-gray-850 {
    background-color: #1a202c; /* Slightly lighter than gray-900 but darker than gray-800 */
  }
</style>

Industrial_Retro_RealEstate_Charts

Simple charts component with an industrial, retro real estate aesthetic, featuring muted colors, exposed elements, and responsive design with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 font-sans text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto border border-stone-300 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-200 dark:bg-stone-800 p-4 sm:p-6">
    <div class="flex justify-between items-center mb-4 sm:mb-6 border-b border-stone-400 dark:border-stone-600 pb-2">
      <h2 class="text-xl sm:text-2xl font-semibold text-stone-700 dark:text-stone-300 uppercase tracking-wide">Property Insights</h2>
      <div class="relative inline-block text-left">
        <select class="block appearance-none w-full bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 py-2 pl-3 pr-8 rounded leading-tight focus:outline-none focus:bg-stone-400 dark:focus:bg-stone-600 focus:border-stone-500 dark:focus:border-stone-500 text-sm sm:text-base">
          <option>Last 30 Days</option>
          <option>Last 3 Months</option>
          <option>Last 6 Months</option>
          <option>Last Year</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-700 dark:text-stone-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">

      <!-- Chart 1: Average Price -->
      <div class="bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 p-4 rounded-md shadow-inner">
        <h3 class="text-md sm:text-lg font-medium mb-2 text-stone-700 dark:text-stone-300">Avg. Property Price ($)</h3>
        <div class="h-32 sm:h-40 xl:h-48 bg-stone-400 dark:bg-stone-600 rounded-sm flex items-end overflow-hidden">
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-1/3" title="$250k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-1/2" title="$300k"></div>
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-3/5" title="$370k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-4/5" title="$450k"></div>
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-3/4" title="$420k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-2/3" title="$380k"></div>
        </div>
        <p class="text-center text-sm mt-3 text-stone-700 dark:text-stone-300">Trend over time</p>
      </div>

      <!-- Chart 2: Listings by Type -->
      <div class="bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 p-4 rounded-md shadow-inner">
        <h3 class="text-md sm:text-lg font-medium mb-2 text-stone-700 dark:text-stone-300">Listings by Type (Units)</h3>
        <div class="h-32 sm:h-40 xl:h-48 flex items-center justify-around bg-stone-400 dark:bg-stone-600 rounded-sm">
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">55%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Houses</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-cyan-600 dark:bg-cyan-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">30%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Apartments</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-red-600 dark:bg-red-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">15%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Land</span>
          </div>
        </div>
        <p class="text-center text-sm mt-3 text-stone-700 dark:text-stone-300">Distribution of listings</p>
      </div>

    </div>

    <div class="mt-4 sm:mt-6 border-t border-stone-400 dark:border-stone-600 pt-4 text-center">
      <p class="text-sm text-stone-600 dark:text-stone-400">Data updated daily. For detailed reports, contact support.</p>
    </div>

  </div>
</div>

Skeuomorphic Charts Component

A complex, responsive charts component with a skeuomorphic design, warm neutral color scheme, and dark mode support, suitable for forum or community dashboards.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200 transition-colors duration-300">

  <div class="max-w-7xl mx-auto space-y-8">

    <!-- Header Section (Subtle Emboss Effect) -->
    <div class="relative p-4 md:p-6 rounded-xl shadow-xl transition-all duration-300
                bg-stone-50 dark:bg-stone-800
                dark:border-t dark:border-l dark:border-stone-700
                border-b border-r border-stone-200 dark:border-stone-900
                after:absolute after:inset-0 after:rounded-xl
                after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]">

      <h1 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-stone-100 leading-tight select-none relative z-10">
        <span class="block">Community Insights</span>
        <span class="block text-base sm:text-lg font-normal text-stone-500 dark:text-stone-400">Dashboard Overview</span>
      </h1>

      <!-- Control Buttons (Pill-shaped, Pressed Effect) -->
      <div class="flex flex-wrap gap-3 mt-4 relative z-10">
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Daily
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-300
                       dark:bg-stone-600
                       text-stone-700 dark:text-stone-200
                       shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Weekly
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Monthly
        </button>
      </div>

    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

      <!-- Left Column - Main Charts -->
      <div class="lg:col-span-2 space-y-8">

        <!-- Large Chart Card (Overall Activity) -->
        <div class="relative p-4 md:p-6 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Total Engagements</h3>
          <div class="relative h-64 md:h-80 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                      shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                      dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                      relative z-10">
            <!-- Placeholder Chart - Mimic a line chart with gradients -->
            <div class="absolute bottom-0 left-0 right-0 h-4/5">
              <div class="absolute w-full h-full from-cream-400/50 via-warm-gray-400/50 to-beige-400/50 bg-gradient-to-t opacity-90"></div>
              <div class="absolute bottom-0 w-full h-1/5 bg-gradient-to-t from-orange-400/80 to-orange-300/80 rounded-t-full blur-sm opacity-70"></div>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-orange-500 to-orange-400 opacity-90"></div>

            <!-- Horizontal Grid Lines -->
            <div class="absolute inset-0 grid grid-rows-5 opacity-30">
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>
            <!-- Vertical Grid Lines -->
            <div class="absolute inset-0 grid grid-cols-7 opacity-30">
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>

            <!-- Example Data Points (Small raised circles) -->
            <div class="absolute p-1 top-1/3 left-1/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/4 left-1/2 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/2 left-3/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>

          </div>
          <div class="mt-4 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>+15%</strong> increase in engagements this week compared to last.</p>
          </div>
        </div>

        <!-- Small Chart Cards (Grid Layout) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

          <!-- Replies Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">Replies Posted</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a bar chart -->
              <div class="absolute bottom-0 left-0 right-0 flex items-end justify-around h-full p-2">
                <div class="w-1/6 h-2/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-3/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-4/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-2/3 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-1/2 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
              </div>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>2,120</strong> total replies this period.</p>
            </div>
          </div>

          <!-- New Topics Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">New Topics</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a line chart -->
              <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(70, 180, 70);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(70, 180, 70);stop-opacity:0.3" />
                  </linearGradient>
                </defs>
                <polyline fill="url(#lineGradient)" stroke="rgb(70, 180, 70)" stroke-width="1.5"
                          points="0,80 20,60 40,75 60,50 80,65 100,40"
                          class="opacity-90 blur-sm brightness-125"
                          style="filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));" />
                <polyline fill="none" stroke="rgb(70, 180, 70)" stroke-width="2"
                          points="0,80 20,60 40,75 60,50 80,65 100,40" />
                <!-- Data Points -->
                <circle cx="0" cy="80" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="20" cy="60" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="40" cy="75" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="60" cy="50" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="80" cy="65" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="100" cy="40" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
              </svg>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>125</strong> new discussions started.</p>
            </div>
          </div>

        </div>
      </div>

      <!-- Right Column - User Stats & Leaderboard -->
      <div class="lg:col-span-1 space-y-8">

        <!-- Top Users Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Top Users</h3>
          <ul class="space-y-4 relative z-10">
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Alice Johnson</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">560 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Bob Smith</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">475 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Carol White</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">390 Replies</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Active Members Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Active Members</h3>
          <div class="flex flex-wrap gap-2 relative z-10">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <span class="w-12 h-12 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-600 text-stone-600 dark:text-stone-300 text-sm font-semibold shadow-md
                         border border-stone-300 dark:border-stone-600">+100</span>
          </div>
          <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>12</strong> users online now.</p>
          </div>
        </div>

      </div>
    </div>

  </div>

</div>

Playful Rainbow Charts Component (Fashion/Beauty)

A simple, playful, and colorful charts component designed for fashion and beauty brands, featuring rounded elements, rainbow gradients, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-8 border border-purple-200 dark:border-purple-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 dark:from-pink-400 dark:via-purple-400 dark:to-indigo-400">
      Our Beauty Trends
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Chart 1: Sales Growth -->
      <div class="bg-gradient-to-br from-pink-100 via-red-100 to-orange-100 dark:from-pink-800 dark:via-red-800 dark:to-orange-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-pink-200 dark:border-pink-700">
        <h3 class="text-xl font-bold mb-4 text-pink-700 dark:text-pink-200">Product Popularity</h3>
        <div class="h-48 flex items-end justify-around" role="img" aria-label="Bar chart showing product popularity">
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-red-400 to-pink-500 dark:from-red-600 dark:to-pink-700 group-hover:from-red-500 group-hover:to-pink-600 h-28" style="height: 70%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Skincare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-orange-400 to-yellow-500 dark:from-orange-600 dark:to-yellow-700 group-hover:from-orange-500 group-hover:to-yellow-600 h-36" style="height: 90%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Makeup</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-blue-400 to-green-500 dark:from-blue-600 dark:to-green-700 group-hover:from-blue-500 group-hover:to-green-600 h-24" style="height: 60%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Haircare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-purple-400 to-indigo-500 dark:from-purple-600 dark:to-indigo-700 group-hover:from-purple-500 group-hover:to-indigo-600 h-32" style="height: 80%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Fragrance</span>
          </div>
        </div>
      </div>

      <!-- Chart 2: Customer Satisfaction -->
      <div class="bg-gradient-to-br from-green-100 via-blue-100 to-purple-100 dark:from-green-800 dark:via-blue-800 dark:to-purple-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-green-200 dark:border-green-700">
        <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-200">Customer Delight Score</h3>
        <div class="h-48 flex items-center justify-center relative">
          <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center relative overflow-hidden ring-4 ring-green-300 dark:ring-green-600">
            <div class="absolute inset-0 rounded-full" style="background-image: conic-gradient(from 0deg, #81e6d9 0%, #38a169 85%, #edf2f7 85%, #edf2f7 100%); clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);"></div>
            <div class="absolute inset-0 rounded-full" style="clip-path: polygon(50% 0%, 50% 100%, 0% 100%, 0% 0%); background-color: #edf2f7; background-image: conic-gradient(from 180deg, #edf2f7 0%, transparent 0%);"></div>
            <div class="absolute w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-full bg-gradient-to-br from-green-500 to-teal-400 dark:from-green-700 dark:to-teal-600 flex items-center justify-center text-white text-3xl font-extrabold shadow-inner">
              85%
            </div>
          </div>
        </div>
        <p class="text-center mt-4 text-sm text-gray-700 dark:text-gray-300">Based on recent surveys</p>
      </div>
    </div>

    <!-- Fun Icons/Illustrations -->
    <div class="flex justify-around items-center pt-8 mt-8 border-t border-purple-200 dark:border-purple-700">
      <img src="https://picsum.photos/id/66/60/60" alt="Cosmetic bottle illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-pink-300 dark:border-pink-600 object-cover transform rotate-6 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/29/60/60" alt="Makeup brush illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-yellow-300 dark:border-yellow-600 object-cover transform -rotate-12 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/105/60/60" alt="Flower illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-blue-300 dark:border-blue-600 object-cover transform rotate-3 hover:transform-rotate-0 transition-transform duration-300">
    </div>
  </div>
</div>

Retro_Vintage_Charts_Component

A complex sports/fitness charts component with a retro/vintage aesthetic, using earth tones, designed for responsiveness and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8 min-h-screen">
  <div class="max-w-7xl mx-auto bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-2 border-stone-300 dark:border-stone-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-stone-300 dark:border-stone-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 font-mono tracking-wider">Athlete Performance Dashboard</h2>
      <p class="text-stone-600 dark:text-stone-400 text-sm sm:text-base">Analyze key metrics over time. Last updated: 2024-07-26</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Left Sidebar (Athlete Profile) -->
      <div class="md:col-span-1 bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-4 border-stone-500 dark:border-stone-300 mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Athlete Avatar">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200">John 'The Beast' Doe</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm">Basketball Player</p>
        </div>
        <div class="text-stone-700 dark:text-stone-300 text-sm">
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Age:</span> 28</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Height:</span> 6'8" (203 cm)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Weight:</span> 240 lbs (109 kg)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Team:</span> City Maulers</p>
          <h4 class="font-bold text-stone-800 dark:text-stone-200 mt-4 mb-2">Recent Achievements:</h4>
          <ul class="list-disc list-inside text-xs space-y-1">
            <li>MVP: Championship Season 2023</li>
            <li>Top Scorer: Last 5 Games</li>
            <li>Improved Vertical Jump by 10%</li>
          </ul>
        </div>
      </div>

      <!-- Main Charts Area -->
      <div class="md:col-span-2 space-y-6">

        <!-- Chart 1: Performance Over Time -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Peak Performance Timeline</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=1" alt="Chart Background">
            <div class="relative z-10 p-2">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Chart:</p>
              <div class="flex justify-around items-end h-40 mt-4">
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-3/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Mar</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-4/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Apr</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[90%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">May</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-full relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jun</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[70%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jul</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Aug</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Chart 2: Recent Game Stats -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Last 5 Games: Key Stats</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=2" alt="Chart Background">
            <div class="relative z-10">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Bars:</p>
              <div class="flex flex-wrap justify-center sm:justify-between items-end gap-3 h-40 mt-4">
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-emerald-700 dark:bg-green-600 rounded-t h-3/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Pts</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">28</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-indigo-700 dark:bg-blue-600 rounded-t h-1/2 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Reb</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">12</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Ast</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">7</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-red-700 dark:bg-red-600 rounded-t h-1/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Stl</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">3</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-purple-700 dark:bg-purple-600 rounded-t h-1/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Blk</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">1</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Stat Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Average Score</p>
            <p class="text-2xl font-bold text-emerald-700 dark:text-green-500 font-mono">25.7</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Vertical Jump</p>
            <p class="text-2xl font-bold text-indigo-700 dark:text-blue-500 font-mono">38"</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Speed (100m)</p>
            <p class="text-2xl font-bold text-amber-700 dark:text-orange-500 font-mono">10.9s</p>
          </div>
        </div>

      </div>
    </div>

    <!-- Calls to Action / Footer -->
    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-stone-300 dark:border-stone-700 flex flex-col sm:flex-row justify-between items-center gap-4">
      <button class="px-6 py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-lg shadow-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
        View Full Report
      </button>
      <div class="text-stone-600 dark:text-stone-400 text-sm">
        <a href="#" class="hover:underline">Export Data</a> | <a href="#" class="hover:underline">Settings</a>
      </div>
    </div>

  </div>
</div>

Memphis_Marketplace_Charts_Component

A complex, responsive charts component with a Memphis Design aesthetic, bold complementary colors, suitable for a multi-vendor marketplace. Includes dark mode support and interactive elements.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-pink-100 dark:bg-zinc-900 font-sans min-h-screen flex items-center justify-center">
  <div class="w-full max-w-7xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden
              border-4 border-fuchsia-500 dark:border-teal-400
              grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10
              relative"> 
    
    <!-- Memphis background patterns -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-3xl">
      <div class="absolute -bottom-16 -left-16 w-64 h-64 bg-teal-400 dark:bg-fuchsia-600 rounded-full mix-blend-multiply opacity-30"></div>
      <div class="absolute -top-20 -right-20 w-80 h-80 bg-fuchsia-500 dark:bg-cyan-500 rounded-full mix-blend-multiply opacity-20"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-300 dark:bg-purple-600 rounded-lg transform rotate-45 mix-blend-multiply opacity-30"></div>
      <div class="absolute bottom-1/3 right-1/4 w-48 h-12 bg-blue-400 dark:bg-orange-500 rounded-full mix-blend-multiply opacity-20"></div>
    </div>

    <!-- Main Content Grid -->
    <div class="relative z-10 lg:col-span-2 space-y-6">
      
      <!-- Header -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b-4 border-dashed border-cyan-400 dark:border-yellow-500 pb-6">
        <div>
          <h1 class="text-4xl sm:text-5xl font-extrabold text-fuchsia-600 dark:text-teal-400 mb-2 leading-tight">Marketplace Insights</h1>
          <p class="text-zinc-600 dark:text-zinc-300 text-lg sm:text-xl font-medium">Performance overview for your vendors.</p>
        </div>
        <button class="px-6 py-3 bg-teal-500 dark:bg-fuchsia-600 text-white rounded-xl shadow-lg
                       transform hover:scale-105 transition-all duration-300
                       border-2 border-fuchsia-600 dark:border-teal-500
                       text-lg font-semibold whitespace-nowrap">View All Reports</button>
      </div>

      <!-- Main Charts Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Sales Volume Chart -->
        <div class="bg-violet-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-fuchsia-400 dark:border-cyan-400">
          <h3 class="text-2xl font-bold text-fuchsia-700 dark:text-teal-300 mb-4">Sales Volume by Category</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10 ">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-300 to-transparent dark:from-teal-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Total Sales: <span class="text-fuchsia-600 dark:text-teal-400 font-bold">$1.2M</span></p>
          </div>
        </div>

        <!-- Vendor Performance Chart -->
        <div class="bg-yellow-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-cyan-400 dark:border-fuchsia-400">
          <h3 class="text-2xl font-bold text-cyan-700 dark:text-yellow-300 mb-4">Top 5 Vendor Performance</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-300 to-transparent dark:from-teal-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Average Rating: <span class="text-cyan-600 dark:text-yellow-400 font-bold">4.7/5</span></p>
          </div>
        </div>
      </div>

      <!-- Quick Stats Section -->
      <div class="bg-indigo-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-teal-500 dark:border-purple-400">
        <h3 class="text-2xl font-bold text-teal-700 dark:text-purple-300 mb-4">Quick Stats</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-teal-400 dark:border-purple-400 shadow-sm">
            <p class="text-3xl font-extrabold text-teal-500 dark:text-purple-300 leading-none">150+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Active Vendors</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-fuchsia-400 dark:border-cyan-400 shadow-sm">
            <p class="text-3xl font-extrabold text-fuchsia-500 dark:text-cyan-300 leading-none">8k+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Products Listed</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-yellow-400 dark:border-orange-400 shadow-sm">
            <p class="text-3xl font-extrabold text-yellow-500 dark:text-orange-300 leading-none">$1.8M</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Total Commission</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-blue-400 dark:border-lime-400 shadow-sm">
            <p class="text-3xl font-extrabold text-blue-500 dark:text-lime-300 leading-none">92%</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Vendor Retention</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Sidebar / Latest Activity -->
    <div class="relative z-10 lg:col-span-1 space-y-6">
      <div class="bg-orange-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-purple-500 dark:border-fuchsia-400">
        <h3 class="text-2xl font-bold text-purple-700 dark:text-fuchsia-300 mb-4">Latest Vendor Activity</h3>
        <div class="space-y-4">
          <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor A <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">15 min ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Added <span class="font-bold text-purple-600 dark:text-fuchsia-300">3 new products</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor B <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">1 hour ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Updated <span class="font-bold text-purple-600 dark:text-fuchsia-300">shipping info</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor C <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">3 hours ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold <span class="font-bold text-purple-600 dark:text-fuchsia-300">5 items</span> (electronics)</p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor D <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Yesterday</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Responded to <span class="font-bold text-purple-600 dark:text-fuchsia-300">2 customer reviews</span></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Trending Products -->
      <div class="bg-lime-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-blue-500 dark:border-orange-400">
        <h3 class="text-2xl font-bold text-blue-700 dark:text-orange-300 mb-4">Trending Products</h3>
        <ul class="space-y-3">
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/198/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Smart Watch X Pro</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">120 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/166/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Noise Cancelling Headphones</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">95 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/175/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Ergonomic Office Chair</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">78 units</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>

Search Components

Categories

Charts