Search Components

Charts

Visual representation of data using graphs

Cyberpunk Chart Component

A responsive and interactive-looking chart component with cyberpunk aesthetic, dark backgrounds, neon accents, and cool neutral colors, suitable for educational platforms.

Open Preview

                <div class="font-sans antialiased bg-gray-950 text-gray-200 dark:bg-gray-950 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-3xl shadow-2xl overflow-hidden border border-blue-900/50 relative">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-transparent to-purple-950/20 pointer-events-none z-0"></div>
    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700/50 pb-4">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-blue-400 group-hover:text-blue-300 transition-colors duration-300 tracking-wide mb-2">
            <span class="text-blue-500">\\</span> Data Progression Analysis
          </h2>
          <p class="text-gray-400 text-sm sm:text-base">Visualize your learning journey and track progress over time.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button class="flex items-center px-4 py-2 bg-gray-800 text-blue-300 rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-blue-400 group-hover:text-white transition-colors duration-300" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Filter by Date</span>
          </button>
          <button class="flex items-center px-4 py-2 bg-blue-700 text-white rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-white group-hover:animate-pulse" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Settings</span>
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="col-span-1 lg:col-span-2 bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300">
          <h3 class="text-xl font-semibold text-blue-300 mb-4">Weekly Performance Overview</h3>
          <!-- Placeholder for Chart -->
          <div class="relative w-full h-64 sm:h-80 md:h-96 flex items-center justify-center bg-gray-900 border border-blue-800/60 rounded-lg overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 via-transparent to-blue-800/10 animate-pulse-slow pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-between items-end text-right text-xs text-gray-500">
              <span class="text-red-400">100%</span>
              <span>80%</span>
              <span>60%</span>
              <span>40%</span>
              <span>20%</span>
              <span class="text-blue-400">0%</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full p-4 flex justify-around text-gray-500 text-xs">
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
              <span>Sun</span>
            </div>
            <!-- Example 'graph' elements - can be replaced with actual chart library output -->
            <div class="absolute bottom-8 left-8 right-8 top-8 flex items-end justify-around">
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out h-[60%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-75 h-[80%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-150 h-[40%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-225 h-[90%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-300 h-[70%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-375 h-[50%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-450 h-[85%] hover:scale-x-105 hover:bg-blue-400"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg sm:text-xl font-bold opacity-30 pointer-events-none">
              CHART DATA
            </div>
          </div>
          <p class="mt-4 text-gray-400 text-sm">This chart displays your average score and completion rate for various learning modules throughout the week.</p>
        </div>

        <div class="col-span-1 flex flex-col space-y-6">
          <!-- Key Metrics -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Key Metrics</h3>
            <div class="space-y-4">
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-3 animate-pulse group-hover:scale-110"></div>
                <span>Average Score: <strong class="text-blue-400">88.5%</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-purple-500 mr-3 animate-pulse delay-100 group-hover:scale-110"></div>
                <span>Modules Completed: <strong class="text-purple-400">12/15</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-3 animate-pulse delay-200 group-hover:scale-110"></div>
                <span>Time Spent (Hrs): <strong class="text-red-400">24.5</strong></span>
              </div>
            </div>
          </div>

          <!-- Daily Trend -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Daily Trend</h3>
            <p class="text-gray-400 text-sm mb-4">See your average score by day.</p>
            <div class="flex justify-between items-end h-24 sm:h-32 relative">
              <div class="absolute w-full h-0.5 bg-gray-700 bottom-0 left-0"></div>
              <!-- Bars -->
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 80%;"></div>
                <span class="text-xs text-gray-500 mt-1">Mon</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 65%;"></div>
                <span class="text-xs text-gray-500 mt-1">Tue</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 90%;"></div>
                <span class="text-xs text-gray-500 mt-1">Wed</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 75%;"></div>
                <span class="text-xs text-gray-500 mt-1">Thu</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 85%;"></div>
                <span class="text-xs text-gray-500 mt-1">Fri</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 50%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sat</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 70%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sun</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recommendations/Insights -->
      <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
        <h3 class="text-xl font-semibold text-blue-300 mb-3">Insights & Recommendations</h3>
        <ul class="list-disc list-inside text-gray-400 space-y-2">
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">You had a strong performance on Wednesday. Keep up the momentum!</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Consider reviewing modules related to 'Data Structures' as your scores dipped on Tuesday.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Your weekend learning hours are lower. A short review session could make a difference.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Aim to achieve 90% completion rate by end of next week.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom pulsing animation for background effect */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.2; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }
</style>

Industrial_Chart_Component_Ocean_Blue_Simple

A simple, responsive chart component with an industrial, raw-materials aesthetic using ocean/blue tones, designed for non-profit/charity organizations. Includes dark mode support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
  <div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
    <h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
    <p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
      </div>
      <div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
        <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
      </div>
      <div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
      </div>
      <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details &rarr;</a>
    </div>
  </div>

  <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
    <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
    <div class="relative h-48 sm:h-64">
      <!-- Placeholder for a simple bar chart or pie chart representation -->
      <div class="absolute inset-0 flex items-end p-2 sm:p-4">
        <div class="flex flex-grow justify-around items-end h-full">
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
          <div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
        </div>
      </div>

      <div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
      <div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
      
      <div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
        <span>Food</span>
        <span>Water</span>
        <span>Shelter</span>
        <span>Health</span>
        <span>Educ.</span>
      </div>
    </div>
  </div>

  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
      Generate Report
    </button>
  </div>
</div>

<style>
  @keyframes bar-grow {
    from { height: 0%; transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
  .animate-bar-grow {
    animation: bar-grow 0.8s ease-out forwards;
  }
</style>

Charts Component

A simple, responsive chart component for sports/fitness applications, featuring a dark mode UI with jewel tones. Displays a basic progress or performance metric.

Open Preview

                <div class="p-4 dark:bg-gray-900 bg-gray-100 min-h-screen font-sans antialiased">
  <div class="max-w-xs mx-auto dark:bg-gray-800 bg-white rounded-lg shadow-xl p-6 border dark:border-gray-700 border-gray-200">
    <h3 class="text-lg font-semibold dark:text-emerald-400 text-emerald-600 mb-4 text-center">Weekly Progress</h3>
    
    <div class="relative w-40 h-40 mx-auto">
      <!-- Background Circle -->
      <div class="absolute inset-0 rounded-full dark:bg-gray-700 bg-gray-200 opacity-75"></div>
      
      <!-- Progress Arc -->
      <div class="absolute inset-0 rounded-full border-4 border-transparent dark:border-t-emerald-500 dark:border-r-emerald-500 border-t-emerald-600 border-r-emerald-600 transform rotate-45" style="clip-path: inset(0 50% 50% 0); animation: rotate-arc 2s forwards;"></div>
      
      <!-- Center Text -->
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-3xl font-bold dark:text-ruby-400 text-ruby-600">75%</span>
      </div>
    </div>
    
    <p class="text-center dark:text-gray-400 text-gray-700 mt-4 text-sm">
      Goal Achieved
    </p>

    <div class="flex justify-around mt-6 text-sm">
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Runs</p>
        <p class="dark:text-emerald-300 text-emerald-700 font-bold">5/7</p>
      </div>
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Distance</p>
        <p class="dark:text-sapphire-300 text-sapphire-700 font-bold">30km</p>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes rotate-arc {
    from { transform: rotate(45deg); clip-path: inset(0 100% 100% 0); }
    to { transform: rotate(225deg); clip-path: inset(0 0% 0% 0%); }
  }

  /* Custom colors for jewel tones (if not already in your Tailwind config) */
  /* Assuming these are defined in your tailwind.config.js for custom colors */
  /* If not, you'd substitute with closest default Tailwind colors like green-500, blue-500, red-500 */
  .dark\:text-emerald-400 { color: #34D399; } /* Example emerald */
  .text-emerald-600 { color: #06906a; } 
  .dark\:border-t-emerald-500 { border-top-color: #10B981; } 
  .dark\:border-r-emerald-500 { border-right-color: #10B981; } 
  .border-t-emerald-600 { border-top-color: #06906a; } 
  .border-r-emerald-600 { border-right-color: #06906a; } 
  .dark\:text-ruby-400 { color: #FB7185; } /* Example ruby */
  .text-ruby-600 { color: #E11D48; } 
  .dark\:text-sapphire-300 { color: #60A5FA; } /* Example sapphire */
  .text-sapphire-700 { color: #2563EB; } 

</style>

Retro_Vintage_Pastel_Social_Charts_Component

A complex, responsive charts component with a retro/vintage 80s/90s aesthetic using pastel colors, designed for social media platforms. Includes dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl border-4 border-purple-300 dark:border-purple-600">
    <div class="p-6 sm:p-8 border-b-4 border-purple-300 dark:border-purple-600 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-0 drop-shadow-lg tracking-wide">Retrowave Insights <span class="text-pink-500 dark:text-pink-400 text-2xl">📊</span></h1>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-pink-300 dark:border-pink-500">Week</button>
          <button class="px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-purple-300 dark:border-purple-500">Month</button>
          <button class="px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-yellow-300 dark:border-yellow-500">Year</button>
        </div>
      </div>
    </div>

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

      <!-- Engagement Chart -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-blue-200 dark:border-blue-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-300 mb-4 flex items-center"><span class="text-3xl mr-2">⚡</span>Engagement Overview</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your popularity rocketed this month!</p>
        <div class="relative h-48 bg-blue-100 dark:bg-gray-600 rounded-lg p-2 flex items-end justify-around border-2 border-blue-200 dark:border-blue-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>100K</span><span>75K</span><span>50K</span><span>25K</span><span>0</span>
          </div>
          <!-- Bars (simplified for HTML/Tailwind) -->
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-2/3 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">75K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-4/5 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">90K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-1/2 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">50K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-full transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">100K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-3/4 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">80K</span>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
        </div>
      </div>

      <!-- Follower Growth -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-pink-200 dark:border-pink-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-300 mb-4 flex items-center"><span class="text-3xl mr-2">💖</span>Follower Growth</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">You gained 1.2K new cool followers!</p>
        <div class="relative h-48 bg-pink-100 dark:bg-gray-600 rounded-lg p-2 flex flex-col justify-end items-start border-2 border-pink-200 dark:border-pink-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>20K</span><span>15K</span><span>10K</span><span>5K</span><span>0</span>
          </div>
          <!-- Line chart simulation with divs -->
          <div class="absolute left-0 bottom-0 w-full h-full flex items-end justify-between px-2 pb-2">
            <div class="relative flex flex-col items-center w-8" style="height: 20%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">4K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 50%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">10K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 70%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">14K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 90%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">18K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 100%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">20K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span>
        </div>
      </div>

      <!-- Top Posts / Content Performance -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-yellow-200 dark:border-yellow-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-300 mb-4 flex items-center"><span class="text-3xl mr-2">🌟</span>Top Content</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your latest 8-bit art is blowing up!</p>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=1" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Pixelated Sunset Vibes</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">15.2K Likes • 2.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#1</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=2" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Neon City Remix</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">12.8K Likes • 1.8K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#2</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=3" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">VHS Dreams Mixtape</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">9.5K Likes • 1.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#3</span>
          </div>
        </div>
      </div>

      <!-- Audience Demographics (Pie Chart) -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-purple-200 dark:border-purple-700 col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-purple-600 dark:text-purple-300 mb-4 flex items-center"><span class="text-3xl mr-2">👾</span>Audience Vibe</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Who's grooving to your tunes?</p>
        <div class="relative h-48 flex items-center justify-center bg-purple-100 dark:bg-gray-600 rounded-lg p-2 border-2 border-purple-200 dark:border-purple-800 shadow-inner">
          <!-- Simple Pie Chart Simulation with Tailwind - Uses nested divs for segments -->
          <div class="relative w-40 h-40 bg-gray-300 dark:bg-gray-500 rounded-full flex items-center justify-center overflow-hidden shadow-xl border border-purple-300 dark:border-purple-600">
            <!-- Segment 1: 50% - Female -->
            <div class="absolute inset-0 bg-pink-400 dark:bg-pink-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(0deg);"></div>
            <!-- Segment 2: 30% - Male -->
            <div class="absolute inset-0 bg-blue-400 dark:bg-blue-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(180deg);"></div>
            <!-- Segment 3: 20% - Other -->
            <div class="absolute inset-0 bg-yellow-400 dark:bg-yellow-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(288deg);"></div>
            <div class="absolute w-20 h-20 bg-purple-100 dark:bg-gray-700 rounded-full border border-purple-300 dark:border-purple-600"></div>
          </div>
        </div>
        <div class="flex justify-center flex-wrap gap-4 mt-4 text-sm font-semibold">
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-pink-400 dark:bg-pink-600 rounded-full mr-2 border border-pink-300 dark:border-pink-500"></span>Female <span class="ml-1 text-pink-600 dark:text-pink-300">(50%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-blue-400 dark:bg-blue-600 rounded-full mr-2 border border-blue-300 dark:border-blue-500"></span>Male <span class="ml-1 text-blue-600 dark:text-blue-300">(30%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2 border border-yellow-300 dark:border-yellow-500"></span>Other <span class="ml-1 text-yellow-600 dark:text-yellow-300">(20%)</span>
          </div>
        </div>
      </div>

      <!-- Recent Mentions/Comments -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-green-200 dark:border-green-700 col-span-1 md:col-span-2 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-green-600 dark:text-green-300 mb-4 flex items-center"><span class="text-3xl mr-2">💬</span>Latest Echoes</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">People are buzzing about your content!</p>
        <div class="space-y-4">
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@SynthWaveDude</span>: "Totally obsessed with your new track! 🎶 Brings back so many memories!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@NeonDreamer</span>: "This pixel art is pure perfection! Keep it up! 🤩"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">yesterday</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@VaporWaveViking</span>: "Your commitment to the aesthetic is unmatched. Love the consistency!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gradient-to-l from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 border-t-4 border-purple-300 dark:border-purple-600 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300">Insights generated with <span class="text-pink-500 dark:text-pink-400 font-bold">✨ RetroBoost AI ✨</span></p>
    </div>
  </div>
</div>

SkeuomorphicSocialMediaChart

A simple, Skeuomorphic-inspired chart component for social media, with complementary colors and responsive design.

Open Preview

                <div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
  <div class="flex items-end justify-between h-40 mb-4">
    <!-- Bar 1 (e.g., Likes) -->
    <div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
    <!-- Bar 2 (e.g., Comments) -->
    <div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
    <!-- Bar 3 (e.g., Shares) -->
    <div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
    <!-- Bar 4 (e.g., Views) -->
    <div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
  </div>
  <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
  </div>
</div>

A responsive dashboard component demonstrating skeuomorphic design with pastel colors and dark mode support, featuring simulated bar charts, line charts, and key performance indicators using pure HTML and Tailwind CSS. No JavaScript is included; charts are visual representations.

Open Preview

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

    <div class="max-w-7xl mx-auto">
        <!-- Dashboard Header -->
        <header class="mb-8 p-6 rounded-xl relative
            bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
            shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
            border border-gray-100 dark:border-gray-700
            text-center
        ">
            <h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
                Analytics Dashboard
            </h1>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
                Data insights at a glance with a Classic UI
            </p>
        </header>

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

            <!-- Card 1: Sales Overview (Bar Chart) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
                overflow-hidden
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>

                <!-- Timeframe buttons (skeuomorphic) -->
                <div class="flex space-x-2 mb-6">
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Daily</button>
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Monthly</button>
                </div>

                <!-- Chart Area - Recessed look -->
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative flex items-end justify-around space-x-2
                ">
                    <!-- Example Bar Chart bars -->
                    <div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
                </div>

                <!-- Legend -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
                    </div>
                </div>
            </div>

            <!-- Card 2: User Engagement (Simulated Line Chart) -->
             <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative
                ">
                    <!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
                    <div class="absolute inset-0 flex items-end">
                        <div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
                            style="
                                clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
                            "></div>
                    </div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
                </div>
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
                    </div>
                </div>
            </div>

            <!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    flex items-center justify-center
                ">
                    <!-- Simple Circle Placeholder for Pie Chart -->
                    <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
                        bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
                    ">
                        <div class="text-center">
                            <p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
                            <p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
                        </div>
                    </div>
                </div>
                <!-- Legend for segments -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
                    </div>
                </div>
            </div>

            <!-- Card 4: Key Performance Indicators -->
            <div class="
                relative col-span-1 md:col-span-2 lg:col-span-3
                rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
                <div class="
                    min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
                ">
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
                        <p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
                        <p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
                    </div>
                </div>
            </div>

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

Charts Component

A brutalist-style charts component for business websites, featuring a triadic color scheme and moderate complexity. It includes responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>

Charts Component

A responsive Charts Component designed with Material Design principles, featuring a pastel color scheme and complex interactivity for showcasing portfolios. It includes support for dark mode with Tailwind CSS classes.

Open Preview

                <div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
            <img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
            <img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
        <div class="flex flex-wrap mt-4 gap-4">
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Charts Component

A responsive charts component designed in skeuomorphism style with a grayscale color scheme and dark mode support, ideal for e-commerce applications.

Open Preview

                <div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>

Glassmorphism Sales Chart

A simple, responsive chart component with a Glassmorphism style, vibrant color scheme, and dark mode support, suitable for e-commerce dashboards.

Open Preview

                <div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>

Search Components

Categories

Charts