Search Components

Data Visualization Components

Components that visualize data in graphical format

CRM_Data_Visualization_Component

A complex, responsive CRM data visualization component with a watercolor/artistic style, monochromatic color scheme, and dark mode support. Designed for business tools.

Open Preview

                <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

A clean, code-inspired sports/fitness dashboard component with monospace fonts, terminal aesthetics, and ocean/blue tones. It features responsive design, dark mode support, and data visualization elements suitable for sports teams and fitness applications.

Open Preview

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

Art Deco Data Visualization Component

A complex, responsive Art Deco-styled data visualization component for consulting services, featuring geometric patterns and a luxurious purple/violet color scheme. Includes dark mode support.

Open Preview

                <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

A playful and cheerful monochromatic booking calendar component with rounded elements, suitable for appointment and reservation systems. It's responsive and supports dark mode.

Open Preview

                <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

An elegant and sophisticated data visualization component designed for dating and social platforms, featuring a grayscale color scheme and responsive layout with dark mode support. Displays user statistics and connection metrics.

Open Preview

                <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

A complex social media dashboard component with a monochromatic Material Design aesthetic, featuring grid-based layouts, depth effects, and responsiveness with dark mode support. Designed for social networking interfaces.

Open Preview

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

Data Visualization Components Component

A complex, minimalist booking/reservation component with a neon/electric color scheme, featuring data visualization elements like a calendar and a time slot selector. Fully responsive with dark mode support.

Open Preview

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

Data Visualization Component (Neon/Glow)

A complex data visualization component for SaaS applications with neon/glow effects, warm neutral colors, and full responsiveness with dark mode support.

Open Preview

                <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

A simple, elegant crypto/blockchain statistic card with jewel tones, responsive design, and dark mode support, suitable for luxury and premium applications.

Open Preview

                <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

A moderate complexity social connection chart component with organic, nature-inspired design, featuring black, white, and a single bright accent color. Designed for dating and social platforms, it showcases connections visually with flowing lines and user avatars. Fully responsive with dark mode support.

Open Preview

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

Search Components

Categories

Data Visualization Components