Rechercher des composants

Catégories

Composants Composants de visualisation de données

Composants de visualisation de données

Composants qui visualisent les données au format graphique

CRM_Data_Visualization_Component

Un composant de visualisation de données CRM complexe et réactif avec un style aquarelle/artistique, une palette de couleurs monochromatiques et une prise en charge du mode sombre. Conçu pour les outils professionnels.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 sm:mb-10">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight mb-2 sm:mb-0">
      Customer Insights Dashboard
    </h1>
    <div class="flex items-center space-x-3">
      <div class="relative">
        <input type="date" class="block w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
      </div>
      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300 ease-in-out">
        Export Data
      </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">

    <!-- Sales Overview Card -->
    <div class="col-span-1 lg:col-span-2 bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Total Sales Performance</h2>
      <div class="flex flex-col md:flex-row items-center justify-between mb-6">
        <div class="text-5xl font-extrabold text-blue-600 dark:text-blue-400 leading-none mb-4 md:mb-0">$12,450k</div>
        <div class="flex items-center text-green-500 dark:text-green-400 text-lg font-semibold">
          <svg class="w-6 h-6 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L11 2m7 17a3 3 0 01-6 0h-1m4 0a3 3 0 01-6 0m-4 0a3 3 0 01-6 0h1m4 0a3 3 0 01-6 0h-1m4 0a3 3 0 01-6 0"></path>
          </svg>
          +15.2% <span class="text-gray-500 dark:text-gray-400 text-sm ml-1">vs last month</span>
        </div>
      </div>
      <!-- Placeholder for a complex sales chart - usually an SVG or JS canvas -->
      <div class="w-full h-64 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-700 dark:to-blue-800 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-300 italic text-sm border border-blue-300 dark:border-blue-600 shadow-inner overflow-hidden relative">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/brushed-alum.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
        Sales Trend Over Time (Chart Placeholder)
        <div class="w-full h-full absolute inset-0 bg-gradient-to-t from-transparent to-white/5 dark:to-black/5"></div>
      </div>
    </div>

    <!-- Customer Satisfaction Card -->
    <div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Customer Satisfaction (CSAT)</h2>
      <div class="flex flex-col items-center justify-center h-48">
        <div class="relative w-36 h-36 border-4 border-blue-300 dark:border-blue-600 rounded-full flex items-center justify-center font-extrabold text-5xl text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20">
          88<span class="text-2xl">%</span>
          <div class="absolute inset-0 rounded-full border-4 border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);"></div>
          <div class="absolute inset-0 rounded-full border-4 border-blue-100 dark:border-blue-800"></div>
        </div>
        <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Excellent</p>
      </div>
      <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        Based on 1,234 recent responses.
      </div>
    </div>

    <!-- Leads by Source Card -->
    <div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Leads by Source</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <span class="text-lg">Organic Search</span>
          <div class="flex items-center">
            <div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
              <div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[70%]"></div>
            </div>
            <span class="font-semibold text-blue-600 dark:text-blue-400">70%</span>
          </div>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">Social Media</span>
          <div class="flex items-center">
            <div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
              <div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[45%]"></div>
            </div>
            <span class="font-semibold text-blue-600 dark:text-blue-400">45%</span>
          </div>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">Referral</span>
          <div class="flex items-center">
            <div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
              <div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[28%]"></div>
            </div>
            <span class="font-semibold text-blue-600 dark:text-blue-400">28%</span>
          </div>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">Paid Ads</span>
          <div class="flex items-center">
            <div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
              <div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[15%]"></div>
            </div>
            <span class="font-semibold text-blue-600 dark:text-blue-400">15%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Activities Feed Card -->
    <div class="col-span-1 md:col-span-2 bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Recent Customer Activities</h2>
      <div class="space-y-5 max-h-96 overflow-y-auto pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-blue-600 dark:scrollbar-track-blue-900 scrollbar-thin">

        <!-- Activity Item 1 -->
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</span> updated <span class="font-semibold">Service Request #3456</span> status to <span class="font-semibold text-green-600 dark:text-green-400">'Resolved'</span>.
            </p>
            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 2 -->
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/men/24.jpg" alt="Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">John Smith</span> added a new prospect <span class="font-semibold">'Acme Corp'</span> to sales pipeline.
            </p>
            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">Yesterday</p>
          </div>
        </div>

        <!-- Activity Item 3 -->
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Sarah Lee</span> sent a marketing email campaign to <span class="font-semibold">'New Leads'</span> segment.
            </p>
            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">3 days ago</p>
          </div>
        </div>

        <!-- Activity Item 4 -->
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">David Kim</span> closed a deal with <span class="font-semibold">'Global Solutions Ltd.'</span> worth <span class="font-semibold text-blue-600 dark:text-blue-400">$8,500</span>.
            </p>
            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">4 days ago</p>
          </div>
        </div>

        <!-- Activity Item 5 -->
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Emily Chen</span> scheduled a follow-up call with <span class="font-semibold">'Innovatech'</span> for next Tuesday.
            </p>
            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">5 days ago</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Top Performing Campaigns Card -->
    <div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Top Performing Campaigns</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <span class="text-lg">Q4 Marketing Blitz</span>
          <span class="font-semibold text-blue-600 dark:text-blue-400">+22% ROI</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">New Product Launch</span>
          <span class="font-semibold text-blue-600 dark:text-blue-400">+18% ROI</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">Holiday Sale 2023</span>
          <span class="font-semibold text-blue-600 dark:text-blue-400">+15% ROI</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-lg">Customer Retention</span>
          <span class="font-semibold text-blue-600 dark:text-blue-400">+10% ROI</span>
        </div>
      </div>
    </div>

    <!-- Customer Churn Rate Card -->
    <div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Customer Churn Rate</h2>
      <div class="flex flex-col items-center justify-center h-48">
        <div class="text-5xl font-extrabold text-red-600 dark:text-red-400 leading-none mb-2">3.8<span class="text-2xl">%</span></div>
        <p class="text-lg text-gray-600 dark:text-gray-300">Monthly Churn</p>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Target: <span class="font-semibold">3.0%</span></p>
      </div>
    </div>

  </div>

</div>

<!-- To make the scrollbar styled, you might need to add this to your Tailwind config plugins or a custom CSS: -->
<!-- @layer components {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-blue-400) var(--tw-blue-100);
  }
  .scrollbar-thumb-blue-400 {
    scrollbar-color: var(--tw-blue-400) var(--tw-blue-100);
  }
  .dark .scrollbar-thumb-blue-600 {
    scrollbar-color: var(--tw-blue-600) var(--tw-blue-900);
  }
  /* For Webkit browsers */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: theme('colors.blue.100');
  }
  .dark .scrollbar-thin::-webkit-scrollbar-track {
    background: theme('colors.blue.900');
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.blue.400');
    border-radius: 20px;
    border: 2px solid theme('colors.blue.100');
  }
  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.blue.600');
    border: 2px solid theme('colors.blue.900');
  }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}
-->

Sports_Fitness_Dashboard_Monospace

Un composant de tableau de bord de sport/fitness épuré et inspiré du code, avec des polices monospaces, une esthétique de terminal et des tons océan/bleu. Il présente un design réactif, une prise en charge du mode sombre et des éléments de visualisation de données adaptés aux équipes sportives et aux applications de fitness.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-blue-900 to-blue-700 text-blue-200 dark:from-gray-900 dark:to-black font-mono p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">

  <!-- Background grid for terminal aesthetic -->
  <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
    <svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 L 0 20" fill="none" stroke="currentColor" stroke-width="0.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-pattern)" />
    </svg>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto space-y-8">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-center bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-4 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg">
      <h1 class="text-2xl sm:text-3xl font-bold text-sky-400 dark:text-green-400 mb-2 sm:mb-0">[FITNESS_DASHBOARD]</h1>
      <nav class="text-sm flex space-x-4">
        <a href="#" class="hover:text-white transition-colors duration-200">[OVERVIEW]</a>
        <a href="#" class="hover:text-white transition-colors duration-200">[ANALYTICS]</a>
        <a href="#" class="hover:text-white transition-colors duration-200">[TRAINING]</a>
        <a href="#" class="hover:text-white transition-colors duration-200">[SETTINGS]</a>
      </nav>
    </header>

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

      <!-- Player Performance Card -->
      <section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
        <h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PLAYER_PERFORMANCE_OVERVIEW]</h2>
        <div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>

        <div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-6">
          <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Player Avatar" class="w-24 h-24 rounded-full border-2 border-sky-400 dark:border-green-400 p-1 object-cover">
          <div class="flex-grow">
            <p class="text-lg font-bold text-white">[PLAYER_ID: JM-42]</p>
            <p class="text-blue-300">[POSITION: Forward]</p>
            <p class="text-blue-300">[STATUS: Optimal]</p>
          </div>
          <div class="grid grid-cols-2 gap-4 text-sm">
            <div><span class="text-sky-300">[SPEED]:</span> <span class="text-white">9.2 m/s</span></div>
            <div><span class="text-sky-300">[ENDURANCE]:</span> <span class="text-white">85%</span></div>
            <div><span class="text-sky-300">[ACCURACY]:</span> <span class="text-white">76%</span></div>
            <div><span class="text-sky-300">[POWER]:</span> <span class="text-white">7.8 kJ</span></div>
          </div>
        </div>

        <div class="mt-6">
          <p class="text-sky-400 dark:text-green-400 font-semibold mb-2">[RECENT_ACTIVITY_LOG]</p>
          <ul class="text-sm leading-relaxed max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-600 dark:scrollbar-thumb-gray-600 scrollbar-track-blue-900 dark:scrollbar-track-gray-900">
            <li><span class="text-yellow-300">[INFO]:</span> 2023-11-01 10:30 - [TRAINING_SESSION_COMPLETE]</li>
            <li><span class="text-green-300">[SUCCESS]:</span> 2023-10-28 18:00 - [MATCH_PERFORMANCE_RATING]: 8.7</li>
            <li><span class="text-red-300">[WARNING]:</span> 2023-10-25 14:15 - [RECOVERY_RATE_BELOW_AVG]</li>
            <li><span class="text-green-300">[SUCCESS]:</span> 2023-10-22 09:00 - [PERSONAL_BEST_SPRINT]: 100m in 11.2s</li>
            <li><span class="text-yellow-300">[INFO]:</span> 2023-10-20 11:00 - [PHYSIO_CHECKUP_SCHEDULED]</li>
          </ul>
        </div>
      </section>

      <!-- Upcoming Training Card -->
      <section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
        <h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[UPCOMING_TRAINING]</h2>
        <div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>

        <div class="space-y-4">
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
            <p class="text-white font-bold">[SESSION]: Speed Drills</p>
            <p class="text-blue-300 text-sm">[DATE]: 2023-11-03</p>
            <p class="text-blue-300 text-sm">[TIME]: 09:00 AM</p>
            <p class="text-blue-300 text-sm">[LOCATION]: Main Pitch</p>
          </div>
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
            <p class="text-white font-bold">[SESSION]: Strength & Conditioning</p>
            <p class="text-blue-300 text-sm">[DATE]: 2023-11-04</p>
            <p class="text-blue-300 text-sm">[TIME]: 02:00 PM</p>
            <p class="text-blue-300 text-sm">[LOCATION]: Gym B</p>
          </div>
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
            <p class="text-white font-bold">[SESSION]: Tactical Review</p>
            <p class="text-blue-300 text-sm">[DATE]: 2023-11-05</p>
            <p class="text-blue-300 text-sm">[TIME]: 11:00 AM</p>
            <p class="text-blue-300 text-sm">[LOCATION]: Tactics Room</p>
          </div>
        </div>
      </section>

      <!-- Quick Stats Card -->
      <section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
        <h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[QUICK_STATS]</h2>
        <div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
            <p class="text-sky-300 text-sm">[AVG_HEART_RATE]</p>
            <p class="text-3xl text-white font-bold mt-1">145 <span class="text-xl">bpm</span></p>
          </div>
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
            <p class="text-sky-300 text-sm">[TOTAL_DISTANCE]</p>
            <p class="text-3xl text-white font-bold mt-1">56.7 <span class="text-xl">km</span></p>
          </div>
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
            <p class="text-sky-300 text-sm">[CALORIES_BURNED]</p>
            <p class="text-3xl text-white font-bold mt-1">3245 <span class="text-xl">kcal</span></p>
          </div>
          <div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
            <p class="text-sky-300 text-sm">[TRAINING_SESSIONS]</p>
            <p class="text-3xl text-white font-bold mt-1">12 <span class="text-xl">/month</span></p>
          </div>
        </div>
      </section>

      <!-- Progress Chart - Placeholder -->
      <section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
        <h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PROGRESS_VISUALIZATION]</h2>
        <div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
        <div class="h-48 sm:h-64 md:h-80 bg-blue-800/30 dark:bg-gray-700/30 rounded-md flex items-center justify-center border border-blue-700 dark:border-gray-600">
          <p class="text-blue-400 text-lg sm:text-xl font-bold">[CHART_PLACEHOLDER]</p>
          <img src="https://picsum.photos/600/300?random=1" alt="Chart Placeholder" class="absolute inset-0 w-full h-full object-cover opacity-20 rounded-md" />
        </div>
        <p class="text-sky-300 text-sm mt-4">[NOTE]: Visual representation of performance metrics over time.</p>
      </section>

      <!-- Team Roster / Top Performers (Image based) -->
      <section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
        <h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[TEAM_ROSTER_TOP_PERFORMERS]</h2>
        <div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>

        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Player 1" class="w-20 h-20 rounded-full border-2 border-green-400 dark:border-sky-400 p-0.5 object-cover">
            <p class="text-white text-sm mt-2">[PLAYER_A_NAME]</p>
            <p class="text-sky-300 text-xs">[RATING]: 9.1</p>
          </div>
          <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player 2" class="w-20 h-20 rounded-full border-2 border-yellow-400 dark:border-orange-400 p-0.5 object-cover">
            <p class="text-white text-sm mt-2">[PLAYER_B_NAME]</p>
            <p class="text-sky-300 text-xs">[RATING]: 8.8</p>
          </div>
          <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Player 3" class="w-20 h-20 rounded-full border-2 border-blue-400 dark:border-purple-400 p-0.5 object-cover">
            <p class="text-white text-sm mt-2">[PLAYER_C_NAME]</p>
            <p class="text-sky-300 text-xs">[RATING]: 8.5</p>
          </div>
          <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/53.jpg" alt="Player 4" class="w-20 h-20 rounded-full border-2 border-red-400 dark:border-pink-400 p-0.5 object-cover">
            <p class="text-white text-sm mt-2">[PLAYER_D_NAME]</p>
            <p class="text-sky-300 text-xs">[RATING]: 8.2</p>
          </div>
        </div>
      </section>

    </main>

    <!-- Footer -->
    <footer class="text-center text-blue-400 text-opacity-70 dark:text-gray-500 text-xs mt-8">
      <p>&copy; 2023 [FITNESS_APP] - [SYS_STATUS]: ALL_SYSTEMS_GO</p>
      <p>[VERSION]: 1.0.0-beta</p>
    </footer>
  </div>

  <!-- Custom glow effect for terminal aesthetic -->
  <style>
    .terminal-glow::before {
      content: '';
      position: absolute;
      top: -2px; 
      left: -2px;
      right: -2px;
      bottom: -2px; 
      /* Dark mode adjustment for glow */
      background: linear-gradient(45deg, #0f4c81, #306eb3, #0f4c81); /* Blue glow */
      z-index: -1;
      filter: blur(8px);
      opacity: 0.3;
      border-radius: 9px; /* Match parent border-radius + padding */
      animation: glow-pulse 3s infinite alternate;
    }

    .dark .terminal-glow::before {
        background: linear-gradient(45deg, #4b5563, #6b7280, #4b5563); /* Gray glow in dark mode */
    }

    @media (prefers-reduced-motion: reduce) {
        .terminal-glow::before {
            animation: none;
        }
    }

    @keyframes glow-pulse {
      0% { opacity: 0.3; transform: scale(1); }
      100% { opacity: 0.4; transform: scale(1.01); }
    }

    /* Custom scrollbar for log */
    .scrollbar-thin::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
      background: var(--tw-bg-scrollbar-track, #1e3a8a);
      border-radius: 10px;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
      background: var(--tw-bg-scrollbar-thumb, #1d4ed8);
      border-radius: 10px;
    }

    .dark .scrollbar-thin::-webkit-scrollbar-track {
      background: var(--tw-bg-scrollbar-track-dark, #1f2937);
    }

    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
      background: var(--tw-bg-scrollbar-thumb-dark, #4b5563);
    }
  </style>

</div>

Composant de visualisation de données Art Déco

Il s’agit d’un composant complexe et réactif de visualisation de données de style Art déco pour les services de conseil, avec des motifs géométriques et une luxueuse palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

  <!-- Art Deco Geometric Background Elements -->
  <div class="absolute inset-0 pointer-events-none overflow-hidden opacity-10 dark:opacity-5">
    <div class="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-purple-200 to-purple-400 dark:from-violet-800 dark:to-purple-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 animate-pulse-slow"></div>
    <div class="absolute bottom-0 right-0 w-80 h-80 bg-gradient-to-tl from-purple-300 to-purple-500 dark:from-violet-700 dark:to-purple-800 transform translate-x-1/3 translate-y-1/3 -rotate-30 animate-pulse-slow delay-500"></div>
    <div class="absolute top-1/4 right-0 w-32 h-32 bg-purple-200 dark:bg-violet-900 transform translate-x-1/2 rotate-15"></div>
    <div class="absolute bottom-1/4 left-0 w-48 h-48 bg-purple-100 dark:bg-violet-950 transform -translate-x-1/3 -rotate-25"></div>
  </div>

  <header class="relative z-10 text-center mb-10 md:mb-16">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-purple-950 dark:text-purple-50 mb-4 tracking-tight leading-tight uppercase relative inline-block group">
      <span class="block">Strategic Insights</span>
      <span class="block text-2xl sm:text-3xl md:text-4xl font-normal text-purple-700 dark:text-purple-300">Data & Analytics Console</span>
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-purple-600 dark:bg-purple-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center"></div>
    </h1>
    <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-300 max-w-3xl mx-auto opacity-90">Unveiling actionable intelligence through elegant data visualization and predictive modeling.</p>
  </header>

  <main class="relative z-10 grid grid-cols-1 md:grid-cols-12 gap-6 sm:gap-8 lg:gap-10">

    <!-- Main Data Panel (Span 8/12 - Desktop) -->
    <section class="md:col-span-8 flex flex-col p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg transform hover:scale-[1.005] transition-transform duration-300 group">
      <h2 class="text-3xl sm:text-4xl font-bold text-purple-900 dark:text-purple-100 mb-6 flex items-center justify-between">
        <span class="">Market Trend Dynamics</span>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.309.746L13 9.475V15a1 1 0 01-.293.707l-2 2A1 1 0 019 17v-5.5L5.309 6.746A1 1 0 015 6V3z" clip-rule="evenodd" /></svg></button>
          <button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a1 1 0 011 1v3.414l-1.707 1.707A1 1 0 0115 11.414V17a1 1 0 01-1 1H6a1 1 0 01-1-1v-5.586a1 1 0 01-.293-.707L3 8.414V5a1 1 0 011-1h1V3a1 1 0 112 0v1zM6 9h8V5H6v4z" clip-rule="evenodd" /></svg></button>
        </div>
      </h2>

      <div class="flex-grow grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
        <!-- Chart Placeholder 1 -->
        <div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Growth Projection</h3>
          <img src="https://picsum.photos/300/200?random=1" alt="Growth Projection Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>
        
        <!-- Chart Placeholder 2 -->
        <div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Demographic Shift</h3>
          <img src="https://picsum.photos/300/200?random=2" alt="Demographic Shift Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>

        <!-- Chart Placeholder 3 (Hidden on smaller viewports) -->
        <div class="hidden xl:flex bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Competitor Landscape</h3>
          <img src="https://picsum.photos/300/200?random=3" alt="Competitor Landscape Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
          <h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Key Indicators</h4>
          <ul class="list-none space-y-1 text-sm text-purple-700 dark:text-purple-200">
            <li><span class="font-medium text-purple-900 dark:text-purple-50">Market Volume:</span> +12.3% YoY</li>
            <li><span class="font-medium text-purple-900 dark:text-purple-50">Customer Acquisition:</span> 8.1% increase</li>
          </ul>
        </div>
        <div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
          <h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Recommendations</h4>
          <p class="text-sm text-purple-700 dark:text-purple-200">Optimize digital channels for targeted outreach. Diversify product offerings based on emerging trends.</p>
        </div>
      </div>
    </section>

    <!-- Side Panel (Span 4/12 - Desktop) -->
    <aside class="md:col-span-4 flex flex-col space-y-6 sm:space-y-8">

      <!-- Quick Stats Card -->
      <div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg group transform hover:scale-[1.005] transition-transform duration-300">
        <h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Operational Summary</h2>
        <div class="grid grid-cols-2 gap-4 text-center">
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">$1.2M</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Revenue Q3</p>
          </div>
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">2,500+</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Client Engagements</p>
          </div>
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 col-span-2 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">98%</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Client Satisfaction Score</p>
          </div>
        </div>
      </div>

      <!-- Recent Activities/Notifications Card -->
      <div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg flex-grow overflow-hidden group transform hover:scale-[1.005] transition-transform duration-300">
        <h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Recent Activities</h2>
        <div class="overflow-y-auto max-h-64 sm:max-h-72 lg:max-h-96 pr-2">
          <ul class="space-y-4">
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Julian Thorne</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Generated <span class="font-medium">'Q4 Performance Report'</span>.</p>
                <time datetime="2023-10-26" class="text-xs text-purple-500 dark:text-purple-400">2 hours ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Eleanor Vance</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Updated <span class="font-medium">'Client Portfolio Trends'</span> dashboard.</p>
                <time datetime="2023-10-25" class="text-xs text-purple-500 dark:text-purple-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Marcus Finch</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Completed <span class="font-medium">'Predictive Model A'</span> recalibration.</p>
                <time datetime="2023-10-24" class="text-xs text-purple-500 dark:text-purple-400">2 days ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Olivia Reed</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Initiated new project: <span class="font-medium">'Global Market Entry Strategy'</span>.</p>
                <time datetime="2023-10-23" class="text-xs text-purple-500 dark:text-purple-400">3 days ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">David Chen</p>
                <p class="text-sm text-purple-700 dark:text-purple-300"> Reviewed 'Client Feedback Analysis'.</p>
                <time datetime="2023-10-22" class="text-xs text-purple-500 dark:text-purple-400">4 days ago</time>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </aside>

  </main>

  <footer class="relative z-10 text-center mt-10 md:mt-16 text-purple-600 dark:text-purple-400 text-sm opacity-80">
    <p>&copy; 2023 Nexus Analytics. All rights reserved. | <a href="#" class="underline hover:text-purple-700 dark:hover:text-purple-300">Privacy Policy</a></p>
  </footer>

</div>

Playful_Booking_Calendar

Un composant de calendrier de réservation monochrome ludique et joyeux avec des éléments arrondis, adapté aux systèmes de rendez-vous et de réservation. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-purple-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 bg-purple-200 dark:bg-purple-900 flex justify-between items-center rounded-t-3xl">
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <h2 class="text-xl sm:text-2xl font-extrabold text-purple-900 dark:text-purple-100">November 2023</h2>
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="grid grid-cols-7 text-center text-sm sm:text-base font-semibold text-purple-700 dark:text-purple-300 p-4 sm:p-6 sm:pb-4">
      <div>Sun</div>
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
    </div>

    <div class="grid grid-cols-7 gap-2 sm:gap-4 p-4 sm:p-6 pt-0">
      <!-- Placeholder for previous month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">29</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">30</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">31</div>

      <!-- Current month's days -->
      <button aria-label="Select November 1st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">1</button>
      <button aria-label="Select November 2nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">2</button>
      <button aria-label="Select November 3rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-500 dark:bg-purple-600 text-white dark:text-white transform scale-105 shadow-md transition-all duration-200 ease-in-out flex items-center justify-center text-base font-bold focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">3</button>
      <button aria-label="Select November 4th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">4</button>

      <!-- Example: Available days -->
      <button aria-label="Select November 5th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">5</button>
      <button aria-label="Select November 6th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">6</button>
      
      <!-- Example: Highlighted day with an event indicator -->
      <button aria-label="Select November 7th" class="relative p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          7
          <span class="absolute bottom-1 right-1 sm:bottom-2 sm:right-2 w-2 h-2 sm:w-2.5 sm:h-2.5 bg-purple-500 rounded-full"></span>
      </button>

      <!-- Remaining days -->
      <button aria-label="Select November 8th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">8</button>
      <button aria-label="Select November 9th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">9</button>
      <button aria-label="Select November 10th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">10</button>
      <button aria-label="Select November 11th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">11</button>

      <button aria-label="Select November 12th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">12</button>
      <button aria-label="Select November 13th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">13</button>
      <button aria-label="Select November 14th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">14</button>
      <button aria-label="Select November 15th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">15</button>
      <button aria-label="Select November 16th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">16</button>
      <button aria-label="Select November 17th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">17</button>
      <button aria-label="Select November 18th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">18</button>

      <button aria-label="Select November 19th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">19</button>
      <button aria-label="Select November 20th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">20</button>
      <button aria-label="Select November 21st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">21</button>
      <button aria-label="Select November 22nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">22</button>
      <button aria-label="Select November 23rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">23</button>
      <button aria-label="Select November 24th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">24</button>
      <button aria-label="Select November 25th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">25</button>

      <button aria-label="Select November 26th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">26</button>
      <button aria-label="Select November 27th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">27</button>
      <button aria-label="Select November 28th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">28</button>
      <button aria-label="Select November 29th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">29</button>
      <button aria-label="Select November 30th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">30</button>

      <!-- Placeholder for next month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">1</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">2</div>
    </div>

    <div class="p-6 sm:p-8 pt-0">
      <h3 class="text-lg sm:text-xl font-bold text-purple-800 dark:text-purple-200 mb-4">Available Slots for Nov 3rd:</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4">
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          9:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          10:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          11:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-500 dark:bg-purple-700 text-white font-bold transform scale-105 shadow-md transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          1:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out opacity-70 cursor-not-allowed">
          2:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          3:00 PM
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 pt-0 flex justify-end">
      <button class="py-3 px-6 sm:py-4 sm:px-8 rounded-full bg-purple-600 dark:bg-purple-700 text-white text-base sm:text-lg font-bold shadow-lg hover:bg-purple-700 dark:hover:bg-purple-800 transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
        Confirm Booking
      </button>
    </div>
  </div>
</div>

Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component

Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.

Ouvrir Aperçu

                <section class="font-sans bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold tracking-tight text-center mb-12 dark:text-gray-50">
      Your Connection Insights
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Card 1: Matches Overview -->
      <div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center mb-6">
          <svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
          <h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Total Matches</h3>
        </div>
        <p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 mb-4">1,245</p>
        <p class="text-neutral-600 dark:text-neutral-400">You've made <span class="font-medium text-neutral-800 dark:text-neutral-200">23% more matches</span> this month than last.</p>
        <div class="h-2 bg-neutral-300 dark:bg-neutral-700 rounded-full mt-6">
          <div class="w-[75%] h-full bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
        </div>
        <p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Match rate: 75%</p>
      </div>

      <!-- Card 2: Messages Sent/Received -->
      <div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center mb-6">
          <svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
          </svg>
          <h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Conversations</h3>
        </div>
        <div class="flex justify-between items-end mb-4">
          <div>
            <p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">890</p>
            <p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Sent</p>
          </div>
          <div>
            <p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">785</p>
            <p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Received</p>
          </div>
        </div>
        <p class="text-neutral-600 dark:text-neutral-400">You initiated <span class="font-medium text-neutral-800 dark:text-neutral-200">55% of your conversations</span> this week.</p>
        <div class="flex mt-6 gap-2">
          <div class="flex-1 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
          <div class="flex-1 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full"></div>
        </div>
        <p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2 flex justify-between"><span>Your initiative</span><span>Theirs</span></p>
      </div>

      <!-- Card 3: Profile Views -->
      <div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center mb-6">
          <svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
          </svg>
          <h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Profile Activity</h3>
        </div>
        <div class="flex items-end mb-4">
          <p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">3,421</p>
          <p class="text-xl text-neutral-600 dark:text-neutral-400 ml-3">Views</p>
        </div>
        <p class="text-neutral-600 dark:text-neutral-400">Your profile was viewed <span class="font-medium text-neutral-800 dark:text-neutral-200">15% more often</span> on Sundays.</p>
        <div class="mt-6">
          <div class="w-full bg-neutral-300 dark:bg-neutral-700 rounded-full h-8 flex items-center justify-between overflow-hidden relative">
            <div class="absolute left-0 top-0 h-full w-[60%] bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
            <span class="absolute text-sm font-semibold text-white dark:text-neutral-900 z-10 p-2">60% New Views</span>
            <span class="absolute text-sm font-semibold text-neutral-900 dark:text-neutral-50 z-10 right-0 p-2">40% Repeat Views</span>
          </div>
        </div>
        <p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Views in last 30 days</p>
      </div>

      <!-- Card 4: Top Interests/Hobbies -->
      <div class="lg:col-span-2 bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center mb-6">
          <svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.17l-.768.769a9 9 0 00-6.19 6.19l-.769.769a9 9 0 000 12.728l.769.769a9 9 0 006.19 6.19l.769.768a9 9 0 0012.728 0l.768-.769a9 9 0 006.19-6.19l.769-.769a9 9 0 000-12.728l-.769-.768a9 9 0 00-6.19-6.19l-.768-.769A9 9 0 0011.049 2.17z"></path>
          </svg>
          <h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Shared Interests</h3>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-neutral-600 dark:text-neutral-400 mb-6">
          <div class="flex items-center"><span class="w-3 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full mr-2"></span>Reading (<span class="font-medium text-neutral-800 dark:text-neutral-200">78%</span> matches)</div>
          <div class="flex items-center"><span class="w-3 h-3 bg-neutral-500 dark:bg-neutral-500 rounded-full mr-2"></span>Traveling (<span class="font-medium text-neutral-800 dark:text-neutral-200">65%</span> matches)</div>
          <div class="flex items-center"><span class="w-3 h-3 bg-neutral-400 dark:bg-neutral-600 rounded-full mr-2"></span>Cooking (<span class="font-medium text-neutral-800 dark:text-neutral-200">52%</span> matches)</div>
          <div class="flex items-center"><span class="w-3 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full mr-2"></span>Hiking (<span class="font-medium text-neutral-800 dark:text-neutral-200">47%</span> matches)</div>
        </div>
        <p class="text-neutral-600 dark:text-neutral-400 mb-4">These are the top interests you share with your connections.</p>
        <div class="flex justify-around mt-6">
          <div class="text-center">
            <img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Alex</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-500">Reading</p>
          </div>
          <div class="text-center">
            <img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Sarah</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-500">Traveling</p>
          </div>
          <div class="text-center">
            <img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
            <p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Mark</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-500">Cooking</p>
          </div>
        </div>
      </div>

      <!-- Card 5: Geographic Distribution (Placeholder) -->
      <div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center mb-6">
          <svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          <h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Location Insights</h3>
        </div>
        <img src="https://picsum.photos/400/250?random=1" alt="Placeholder map" class="rounded-lg mb-4 w-full h-32 object-cover object-center border border-neutral-200 dark:border-neutral-800">
        <p class="text-neutral-600 dark:text-neutral-400 mb-2">Most of your current matches are from <span class="font-medium text-neutral-800 dark:text-neutral-200">major metropolitan areas</span>.</p>
        <a href="#" class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 text-sm font-medium underline">View detailed map</a>
      </div>

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

Social_Media_Dashboard

Un composant complexe de tableau de bord de médias sociaux avec une esthétique monochromatique de Material Design, avec des mises en page basées sur une grille, des effets de profondeur et une réactivité avec prise en charge du mode sombre. Conçu pour les interfaces de réseaux sociaux.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen text-gray-900 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Main Content Area -->
    <div class="md:col-span-2 lg:col-span-3 flex flex-col gap-6">

      <!-- Top Navigation/Search -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 flex items-center space-x-4">
        <div class="relative flex-grow">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          <input type="text" placeholder="Search posts, friends, and more..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
        </div>
        <button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h.01M12 21v-4m-3 4v-4m0 0h6m-12 0H6m6 0C5.03 17 3 14.654 3 12S5.03 7 7.5 7h9C18.97 7 21 9.346 21 12s-2.03 5-4.5 5h-9z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
        </button>
      </div>

      <!-- Create Post Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4">Create New Post</h2>
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <input type="text" placeholder="What's on your mind?" class="flex-grow py-2 px-4 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6l.01 0M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
              <span class="text-sm hidden sm:block">Photo</span>
            </button>
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8V4a1 1 0 011-1h6a1 1 0 011 1v4M7 16v4a1 1 0 001 1h6a1 1 0 001-1v-4M4 8h16M4 16h16"></path></svg>
              <span class="text-sm hidden sm:block">Video</span>
            </button>
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
              <span class="text-sm hidden sm:block">Location</span>
            </button>
          </div>
          <button class="px-6 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
            Post
          </button>
        </div>
      </div>

      <!-- Feed Post - Example 1 (with image) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center space-x-3 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Enjoying the beautiful autumn colors! Such a peaceful afternoon spent exploring the local park. #AutumnVibes #NatureLover</p>
        <img class="rounded-lg mb-4 w-full h-auto object-cover max-h-96" src="https://picsum.photos/800/500?random=1" alt="Post Image">
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
          <div class="flex space-x-6">
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>120</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>45</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
              <span>15</span>
            </button>
          </div>
          <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
        </div>
      </div>

      <!-- Feed Post - Example 2 (text only) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center space-x-3 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Just finished a great coding session! Feeling productive and ready to tackle the next challenge. #codinglife #developer</p>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
          <div class="flex space-x-6">
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>88</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>30</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
              <span>8</span>
            </button>
          </div>
          <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
        </div>
      </div>

    </div>

    <!-- Sidebar / Widgets Area -->
    <div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6">

      <!-- Profile Card -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 text-center">
        <img class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Avatar">
        <h3 class="text-xl font-semibold mb-1">Alex Johnson</h3>
        <p class="text-gray-600 dark:text-gray-400">Web Developer | Enthusiast</p>
        <div class="flex justify-around items-center mt-4 border-t border-b border-gray-200 dark:border-gray-700 py-3">
          <div>
            <p class="font-semibold text-lg">1.2K</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div>
            <p class="font-semibold text-lg">500</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div>
            <p class="font-semibold text-lg">89</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="mt-4 w-full px-4 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
          View Profile
        </button>
      </div>

      <!-- Trending Topics Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-xl font-semibold mb-4">Trending Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#1</span> #AIRevolution <span class="text-xs text-gray-500 dark:text-gray-400">(1.5M posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#2</span> #FrontendDev <span class="text-xs text-gray-500 dark:text-gray-400">(980K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#3</span> #SustainableLiving <span class="text-xs text-gray-500 dark:text-gray-400">(720K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#4</span> #TravelGoals <span class="text-xs text-gray-500 dark:text-gray-400">(600K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#5</span> #HealthAndFitness <span class="text-xs text-gray-500 dark:text-gray-400">(550K posts)</span></a></li>
        </ul>
      </div>

      <!-- Who to Follow Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-xl font-semibold mb-4">Who to Follow</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">Sarah Green</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@sarah_g</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/25.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">David Lee</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@davidd_lee</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">Emily Chen</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@emily_c</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>

Composant Composants de visualisation de données

Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 md:p-8 lg:p-12 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90 border border-gray-200 dark:border-gray-700">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 lg:p-10">

      <!-- Left Section: Calendar and Summary -->
      <div class="lg:col-span-2 flex flex-col space-y-8">
        <h2 class="text-4xl font-extrabold text-indigo-600 dark:text-fuchsia-500 mb-6 tracking-tight">Book Your Spot</h2>

        <!-- Monthly Calendar -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600 relative group">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Date</h3>
          
          <div class="flex justify-between items-center mb-4">
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
            <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">October 2023</span>
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>
          </div>
          <div class="grid grid-cols-7 gap-2 text-center text-sm">
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sun</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Mon</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Tue</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Wed</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Thu</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Fri</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sat</div>
            
            <!-- Example days -->
            <div class="py-2 text-gray-400">27</div>
            <div class="py-2 text-gray-400">28</div>
            <div class="py-2 text-gray-400">29</div>
            <div class="py-2 text-gray-400">30</div>
            <div class="py-2 text-gray-400">1</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">2</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">3</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">4</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">5</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">6</div>
            <div class="py-2 text-gray-900 dark:text-gray-100 relative group selected-date">
                7<span class="absolute inset-0 border-2 border-fuchsia-500 dark:border-cyan-400 rounded-full scale-0 group-hover:scale-105 transition-all duration-300"></span>
            </div>
            <div class="py-2 text-gray-900 dark:text-gray-100">8</div>
            <div class="py-2 rounded-full bg-fuchsia-100 dark:bg-cyan-900 text-fuchsia-700 dark:text-cyan-300 font-semibold border-2 border-fuchsia-400 dark:border-cyan-600 shadow-inner">9</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">10</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">11</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">12</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">13</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">14</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">15</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">16</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">17</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">18</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">19</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">20</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">21</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">22</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">23</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">24</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">25</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">26</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">27</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">28</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">29</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">30</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">31</div>
            <div class="py-2 text-gray-400">1</div>
            <div class="py-2 text-gray-400">2</div>
            <div class="py-2 text-gray-400">3</div>
            <div class="py-2 text-gray-400">4</div>
          </div>
        </div>

        <!-- Time Slot Selection -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Time Slot</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">09:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">10:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">11:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">12:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-fuchsia-500 dark:border-cyan-400 bg-fuchsia-200 dark:bg-cyan-800 text-fuchsia-800 dark:text-cyan-200 font-bold shadow-md transform scale-105 relative ring-2 ring-fuchsia-500 dark:ring-cyan-400 transition-all duration-300 group">
              <span class="text-lg">01:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200 opacity-60 cursor-not-allowed">
              <span class="text-lg font-medium">02:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">03:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">04:00 PM</span>
            </button>
          </div>
        </div>

        <!-- Additional Booking Info/Charts -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Availability Overview</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-fuchsia-500 dark:bg-cyan-400 animate-pulse"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Few Spots Left</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-lime-500"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Highly Available</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-red-500 opacity-60"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Fully Booked</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Not Available</span>
            </div>
          </div>

          <div class="mt-6">
            <h4 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Daily Slot Trends</h4>
            <!-- Placeholder for a simple bar chart or sparkline: SVG or image -->
            <div class="w-full h-32 bg-gradient-to-r from-lime-300 via-fuchsia-300 to-red-300 dark:from-lime-800 dark:via-fuchsia-800 dark:to-red-800 rounded-md p-2 relative overflow-hidden">
                <div class="absolute bottom-0 left-0 w-full flex items-end justify-around h-full">
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 0s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 60%; animation-delay: 0.1s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 40%; animation-delay: 0.2s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 20%; animation-delay: 0.3s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 0.4s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 0.5s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 90%; animation-delay: 0.6s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 0.7s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 15%; animation-delay: 0.8s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 65%; animation-delay: 0.9s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 75%; animation-delay: 1s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 45%; animation-delay: 1.1s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 25%; animation-delay: 1.2s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 85%; animation-delay: 1.3s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 55%; animation-delay: 1.4s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 35%; animation-delay: 1.5s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 10%; animation-delay: 1.6s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 95%; animation-delay: 1.7s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 1.8s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 1.9s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 2s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 2.1s;"></div>
                </div>
            </div>
            <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">Scroll to see more days</p>
          </div>

        </div>
      </div>

      <!-- Right Section: Booking Summary & User Info -->
      <div class="lg:col-span-1 flex flex-col space-y-8">
        <!-- Booking Summary -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-xl border border-violet-100 dark:border-gray-600 relative overflow-hidden">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-400/20 to-cyan-400/20 dark:from-fuchsia-700/20 dark:to-cyan-700/20 opacity-30"></div>
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400 relative z-10">Your Booking Summary</h3>
          <div class="space-y-4 relative z-10">
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Service:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold">Premium Consultation</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Date:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">Oct 9, 2023</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Time:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">01:00 PM</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Duration:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold">60 minutes</span>
            </div>
            <div class="flex justify-between mb-4 pt-4 border-t border-violet-200 dark:border-gray-600">
              <span class="text-xl font-bold text-gray-900 dark:text-gray-100">Total:</span>
              <span class="text-xl font-bold text-indigo-700 dark:text-lime-400">$120.00</span>
            </div>
          </div>

          <button class="w-full flex items-center justify-center py-3 px-6 bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white font-extrabold rounded-lg shadow-lg hover:from-fuchsia-600 hover:to-cyan-600 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-cyan-600 transform transition-all duration-300 ease-out sm:text-lg lg:text-xl relative overflow-hidden group">
            <span class="relative z-10">Confirm Booking</span>
            <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <svg class="ml-2 w-6 h-6 text-white absolute right-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Consultant/Service Provider Info -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Your Consultant</h3>
          <div class="flex items-center space-x-4">
            <img class="w-20 h-20 rounded-full object-cover border-4 border-fuchsia-400 dark:border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Consultant John Doe">
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Senior Business Analyst</p>
              <div class="flex items-center mt-1 text-sm text-gray-500 dark:text-gray-400">
                <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                4.9 (245 reviews)
              </div>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 text-sm">John specializes in digital transformation and has helped numerous clients achieve their strategic goals.</p>
        </div>

        <!-- Customer Support Card -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Need Help?</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">Our support team is ready to assist you with any questions or issues.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-semibold rounded-md shadow hover:from-indigo-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-blue-400 transition-all duration-300">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Contact Support
          </a>
        </div>

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

<style>
  /* Adding a simple bounce/rise animation for chart bars */
  @keyframes rise {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
  }
  .animate-rise {
    animation: rise 0.5s ease-out forwards;
    transform-origin: bottom;
  }

  /* Custom focus/active state for selected date */
  .selected-date:focus-within .ring-2, .selected-date:hover .ring-2 {
    transform: scale(1.05);
    opacity: 1;
  }
</style>

Composant de visualisation des données (néon/lueur)

Un composant complexe de visualisation de données pour les applications SaaS avec des effets de néon/lueur, des couleurs neutres chaudes et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300 relative overflow-hidden">
    <!-- Background Glow Effect (Subtle) -->
    <div class="absolute inset-0 bg-gradient-to-br from-stone-200 via-stone-50 to-stone-200 dark:from-stone-800 dark:via-stone-950 dark:to-stone-800 rounded-lg animate-pulse-glow-bg opacity-20 dark:opacity-10 blur-xl"></div>

    <div class="relative z-10">
        <!-- Header -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-stone-200 dark:border-stone-700 pb-4">
            <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-50 mb-2 sm:mb-0 relative">
                Overall Performance
                <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-sky-400 dark:from-lime-600 dark:to-sky-600 rounded-full shadow-glow-sm"></span>
            </h2>
            <div class="flex items-center space-x-3 text-sm">
                <span class="text-stone-500 dark:text-stone-400">Last 30 Days</span>
                <button class="flex items-center px-4 py-2 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700 rounded-full text-stone-700 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition-all duration-200 relative group overflow-hidden">
                    <span class="absolute inset-0 bg-gradient-to-r from-transparent via-lime-400 to-transparent opacity-0 group-hover:opacity-20 animate-shine"></span>
                    <span class="relative">Filter <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span>
                </button>
            </div>
        </div>

        <!-- Key Metrics Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Metric Card 1 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-lime-300 to-transparent dark:from-lime-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">New Users</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">12,345 <span class="text-lime-500 text-base font-normal ml-1">+12.5%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-lime-400 dark:bg-lime-600 w-3/4 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 2 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-sky-300 to-transparent dark:from-sky-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Revenue</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">$87,654 <span class="text-red-500 text-base font-normal ml-1">-3.2%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-sky-400 dark:bg-sky-600 w-2/3 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 3 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-transparent dark:from-purple-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Active Sessions</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4,567 <span class="text-lime-500 text-base font-normal ml-1">+8.1%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-purple-400 dark:bg-purple-600 w-4/5 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 4 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-orange-300 to-transparent dark:from-orange-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Conversion Rate</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4.7% <span class="text-lime-500 text-base font-normal ml-1">+0.8%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-orange-400 dark:bg-orange-600 w-1/2 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Large Chart (Left) -->
            <div class="lg:col-span-2 bg-stone-50 dark:bg-stone-800 rounded-lg p-6 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-tr from-stone-100 to-transparent dark:from-stone-900 opacity-10 blur-xl animate-pulse-glow-reverse"></div>
                <div class="relative z-10">
                    <h3 class="text-xl font-semibold mb-4 text-stone-800 dark:text-stone-50">
                        Monthly Trends
                        <span class="block w-1/4 h-0.5 bg-gradient-to-r from-sky-400 to-purple-400 dark:from-sky-600 dark:to-purple-600 rounded-full mt-1 shadow-glow-sm"></span>
                    </h3>
                    <!-- Placeholder for Chart -->
                    <div class="w-full h-64 sm:h-80 md:h-96 bg-stone-100 dark:bg-stone-900 rounded-md flex items-center justify-center text-stone-400 dark:text-stone-600 border border-dashed border-stone-300 dark:border-stone-700 relative">
                        <p>Line Chart Placeholder</p>
                        <!-- Example data points with glow -->
                        <div class="absolute top-1/2 left-1/4 w-3 h-3 bg-lime-400 dark:bg-lime-600 rounded-full shadow-glow-md animate-bounce-slow"></div>
                        <div class="absolute top-1/3 left-1/2 w-3 h-3 bg-sky-400 dark:bg-sky-600 rounded-full shadow-glow-md animate-bounce-slow delay-100"></div>
                        <div class="absolute top-3/4 left-3/4 w-3 h-3 bg-purple-400 dark:bg-purple-600 rounded-full shadow-glow-md animate-bounce-slow delay-200"></div>
                    </div>
                </div>
            </div>

            <!-- Small Charts / Stats (Right) -->
            <div class="lg:col-span-1 flex flex-col gap-6">
                <!-- Top Source Card -->
                <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-br from-teal-300 to-transparent dark:from-teal-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                    <div class="relative z-10">
                        <h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Top Source</h3>
                        <div class="flex items-center mb-2">
                            <img src="https://picsum.photos/40/40?grayscale&random=1" alt="Source Icon" class="w-10 h-10 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                            <div>
                                <p class="font-medium text-stone-900 dark:text-stone-100">Google Search</p>
                                <p class="text-sm text-stone-500 dark:text-stone-400">55% of traffic</p>
                            </div>
                        </div>
                        <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                            <div class="h-full bg-teal-400 dark:bg-teal-600 w-[55%] rounded-full shadow-glow-xs"></div>
                        </div>
                    </div>
                </div>

                <!-- User Activity Stream -->
                <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-bl from-amber-300 to-transparent dark:from-amber-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                    <div class="relative z-10">
                        <h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Recent Activity</h3>
                        <ul class="space-y-3">
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">John D.</span> viewed <span class="text-sky-500 dark:text-sky-400">'Analytics Dashboard'</span>
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">2 minutes ago</span>
                                </div>
                            </li>
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">Jane S.</span> updated <span class="text-purple-500 dark:text-purple-400">'Campaign Data'</span>
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">15 minutes ago</span>
                                </div>
                            </li>
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">Mike R.</span> logged in
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">1 hour ago</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS animated glows and pulse effects -->
<style>
    @keyframes pulse-glow-bg {
        0%, 100% { transform: scale(1); opacity: 0.2; }
        50% { transform: scale(1.02); opacity: 0.3; }
    }
    @keyframes pulse-glow-bg-dark {
        0%, 100% { transform: scale(1); opacity: 0.1; }
        50% { transform: scale(1.02); opacity: 0.15; }
    }
    @keyframes pulse-glow-sm {
        0%, 100% { transform: scale(1); opacity: 0.2; }
        50% { transform: scale(1.01); opacity: 0.3; }
    }
    @keyframes pulse-glow-reverse {
        0%, 100% { transform: scale(1); opacity: 0.1; }
        50% { transform: scale(0.98); opacity: 0.15; }
    }
    @keyframes shine {
        0% { transform: translateX(-100%); }
        60% { transform: translateX(100%); }
        100% { transform: translateX(100%); }
    }
    @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    .animate-pulse-glow-bg {
        animation: pulse-glow-bg 6s infinite ease-in-out;
    }
    .dark .animate-pulse-glow-bg {
        animation: pulse-glow-bg-dark 6s infinite ease-in-out;
    }
    .animate-pulse-glow-sm {
        animation: pulse-glow-sm 4s infinite ease-in-out;
    }
    .animate-pulse-glow-reverse {
        animation: pulse-glow-reverse 5s infinite ease-in-out;
    }
    .animate-shine {
        animation: shine 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .animate-bounce-slow {
        animation: bounce-slow 3s infinite ease-in-out;
    }

    .shadow-glow-xs {
        filter: drop-shadow(0 0px 3px var(--tw-shadow-color));
        --tw-shadow-color: rgba(74, 222, 128, 0.6);
    }
    .dark .shadow-glow-xs {
        --tw-shadow-color: rgba(34, 197, 94, 0.6);
    }
    .shadow-glow-sm {
        filter: drop-shadow(0 0px 8px var(--tw-shadow-color));
        --tw-shadow-color: rgba(74, 222, 128, 0.8);
    }
    .dark .shadow-glow-sm {
        --tw-shadow-color: rgba(34, 197, 94, 0.8);
    }
    .shadow-glow-md {
        filter: drop-shadow(0 0px 10px var(--tw-shadow-color));
        --tw-shadow-color: rgba(59, 130, 246, 0.8);
    }
    .dark .shadow-glow-md {
        --tw-shadow-color: rgba(37, 99, 235, 0.8);
    }
</style>

Luxury_Premium_Crypto_Stat_Card

Une carte statistique crypto/blockchain simple et élégante avec des tons de bijoux, un design réactif et une prise en charge du mode sombre, adaptée aux applications de luxe et haut de gamme.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 border-b-4 border-emerald-600 dark:border-emerald-500">
    <div class="p-6 sm:p-8 space-y-4">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Current BTC Price</h3>
        <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.593 1M12 8V4m0 4a8 8 0 100 16m0-16v4"></path>
        </svg>
      </div>
      <p class="text-3xl sm:text-4xl font-extrabold text-emerald-700 dark:text-emerald-300 tracking-tight leading-tight">$45,678.90</p>
      <div class="flex items-center justify-between text-sm sm:text-base">
        <span class="text-gray-600 dark:text-gray-400">24h Change:</span>
        <span class="flex items-center text-red-500 dark:text-red-400 font-semibold">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17l-5-5m0 0l5-5m-5 5h12"></path>
          </svg>
          -1.23%
        </span>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex justify-between items-center text-xs sm:text-sm text-gray-500 dark:text-gray-400">
        <span>Last updated:</span>
        <span>Just now</span>
      </div>
    </div>
  </div>
</div>

Social_Connection_Chart_Component

Un composant de graphique de connexion sociale de complexité modérée avec un design organique inspiré de la nature, avec du noir, du blanc et une seule couleur d’accent vive. Conçu pour les plateformes de rencontres et les plateformes sociales, il met en valeur les connexions visuellement avec des lignes fluides et des avatars d’utilisateurs. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-50 flex items-center justify-center dark:bg-gray-900 overflow-hidden">
  <div class="max-w-6xl w-full mx-auto p-6 md:p-8 rounded-3xl bg-white shadow-xl dark:bg-gray-800 transition-colors duration-300">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white transition-colors duration-300 tracking-tight leading-tight">
        Your Connection Ecosystem
      </h2>
      <button class="px-4 py-2 rounded-full text-sm font-semibold bg-pink-500 text-white shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
        Expand View
      </button>
    </div>

    <p class="text-md md:text-lg mb-8 text-gray-600 dark:text-gray-300 transition-colors duration-300 leading-snug">
      Visualize the organic flow of your social connections and discover new possibilities within your network.
    </p>

    <div class="relative w-full h-80 sm:h-96 md:h-[500px] lg:h-[600px] flex items-center justify-center p-4 border border-gray-200 rounded-2xl dark:border-gray-700 overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-850 dark:to-gray-800">
      <!-- Main Node -->
      <div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="You" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-pink-500 shadow-lg ring ring-pink-500 ring-opacity-50 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:ring-8" />
        <span class="mt-2 text-sm md:text-base font-semibold text-gray-800 dark:text-white transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-2 whitespace-nowrap">You</span>
      </div>

      <!-- Connection Nodes (Organic Placement) -->
      <div class="absolute z-10 w-full h-full">
        <!-- Path 1 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 48 50 C 30 20, 10 30, 25 15" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] left-[18%] md:top-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Alice" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Alice</span>
        </div>

        <!-- Path 2 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 52 50 C 70 80, 85 70, 75 85" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] right-[18%] md:bottom-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Bob" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Bob</span>
        </div>

        <!-- Path 3 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 48 C 20 70, 30 90, 15 75" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] left-[18%] md:bottom-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Carol" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Carol</span>
        </div>

        <!-- Path 4 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 52 C 80 30, 70 10, 85 25" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] right-[18%] md:top-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="David" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">David</span>
        </div>

        <!-- Path 5 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 25 5, 20 50, 40 10" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute top-[5%] left-[30%] md:top-[2%] md:left-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Eve" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Eve</span>
        </div>

        <!-- Path 6 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 75 95, 80 50, 60 90" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute bottom-[5%] right-[30%] md:bottom-[2%] md:right-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Frank" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Frank</span>
        </div>

      </div>
    </div>

    <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Connections</h4>
        <p class="text-3xl font-extrabold text-pink-500">236</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12 since last week</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Mutual Interests</h4>
        <p class="text-3xl font-extrabold text-pink-500">78%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Avg. across your network</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">New Connections this Month</h4>
        <p class="text-3xl font-extrabold text-pink-500">18</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Ready to mingle</p>
      </div>
    </div>

    <div class="mt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-gray-900 text-white dark:bg-pink-500 dark:text-white shadow-lg hover:bg-gray-700 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:scale-105">
        Explore New Matches
        <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
          </path>
        </svg>
      </a>
    </div>
  </div>
</div>