Rechercher des composants

Catégories

Composants Graphiques

Graphiques

Représentation visuelle des données à l’aide de graphiques

Composant Cyberpunk Chart - Gouvernement/Public

Un composant graphique modérément complexe avec une esthétique cyberpunk, adapté aux sites Web gouvernementaux et de services publics. Dispose d’un fond sombre, d’accents néons lumineux et d’une palette de couleurs rétro/vintage. Réactif et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Graphiques

Un composant graphique complexe et réactif avec une palette de couleurs Neon/Electric, inspiré de la conception matérielle pour les outils CRM/Business. Comprend plusieurs éléments interactifs et une prise en charge complète du mode sombre.

Ouvrir Aperçu

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

Composant Cartes neumorphes

Il s’agit d’un composant de graphiques complexe et réactif avec un style de conception neumorphique et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant complexe de graphiques financiers inspiré de Memphis Design, avec des couleurs vives, des formes géométriques et une palette de couleurs néon/électrique. Il est entièrement réactif, prend en charge le mode sombre et convient aux interfaces finance/banque.

Ouvrir Aperçu

                <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

Un composant de graphiques complexe et réactif pour les applications de sport et de fitness, doté d’un design de typographie suisse épuré et minimaliste avec une base en noir et blanc et une seule couleur d’accentuation. Inclut la prise en charge du mode sombre et une mise en page basée sur une grille pour diverses visualisations de données.

Ouvrir Aperçu

                <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

Composant de graphiques simple avec une esthétique immobilière industrielle et rétro, avec des couleurs sourdes, des éléments exposés et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Cartes Skeuomorphes

Un composant de graphiques complexe et réactif avec un design skeuomorphe, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux tableaux de bord de forum ou de communauté.

Ouvrir Aperçu

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

Composant Graphiques arc-en-ciel ludiques (mode/beauté)

Un composant de graphiques simple, ludique et coloré conçu pour les marques de mode et de beauté, avec des éléments arrondis, des dégradés arc-en-ciel et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant complexe de tableaux de sport/fitness à l’esthétique rétro/vintage, utilisant des tons de terre, conçu pour la réactivité et le support du mode sombre.

Ouvrir Aperçu

                <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

Il s’agit d’un composant de graphiques complexe et réactif avec une esthétique Memphis Design, des couleurs complémentaires audacieuses, adapté à une place de marché multi-fournisseurs. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

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