Components Charts VibrantGlassmorphismChart

VibrantGlassmorphismChart

A simple Glassmorphism chart component with vibrant colors, suitable for blogs and content sites. The component is responsive and includes dark theme support using Tailwind CSS.

Preview

HTML Code

<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

Related Components

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

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

Charts Component

A simple, responsive chart component with pastel colors and dark mode support, designed for blog/content consumption with subtle microinteractions via hover effects. No JavaScript.

Open