Search Components

All Components

Browse all available Tailwind CSS components

Heat Maps Component

A monospace, developer-inspired heat map component with earth tones, designed for consulting/services. Features a grid-like display simulating heat map data for different days, responsive across devices, and supports dark mode.

Open Preview

                <div class="font-mono bg-stone-100 text-stone-800 py-12 px-4 sm:px-6 lg:px-8 dark:bg-stone-900 dark:text-stone-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-4 dark:text-stone-100">
      <span class="text-emerald-600 dark:text-emerald-400">//</span> Activity Overview
    </h2>
    <p class="text-center text-lg mb-10 text-stone-600 dark:text-stone-400">
      Review your contributions and activity patterns.
    </p>

    <div class="bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden dark:bg-stone-800 dark:border-stone-700">
      <div class="p-6">
        <div class="flex items-center justify-between mb-6">
          <div class="flex space-x-2 text-sm text-stone-500 dark:text-stone-400">
            <span>2023</span>
            <span class="text-emerald-600 dark:text-emerald-400">//</span>
            <span>Activity</span>
          </div>
          <div class="flex items-center space-x-2 text-sm">
            <div class="w-3 h-3 bg-stone-200 dark:bg-stone-700 rounded-sm" title="No activity"></div>
            <div class="w-3 h-3 bg-emerald-100 dark:bg-emerald-800 rounded-sm" title="Low activity"></div>
            <div class="w-3 h-3 bg-emerald-300 dark:bg-emerald-600 rounded-sm" title="Moderate activity"></div>
            <div class="w-3 h-3 bg-emerald-500 dark:bg-emerald-400 rounded-sm" title="High activity"></div>
            <div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-sm" title="Very High activity"></div>
            <span class="ml-2 text-stone-600 dark:text-stone-400">Less</span>
            <span class="text-stone-600 dark:text-stone-400">More</span>
          </div>
        </div>

        <div class="grid gap-1 grid-flow-col auto-cols-max overflow-x-auto pb-4 custom-scrollbar">
          <!-- Days of Week Labels (Hidden on small, visible on larger) -->
          <div class="hidden md:flex flex-col justify-start text-xs text-stone-500 dark:text-stone-400 pt-2">
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Mon</div>
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Wed</div>
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Fri</div>
            <div class="h-4 leading-4 mb-1"></div>
          </div>

          <!-- Month Row -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jan</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 7: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 8: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 9: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 11: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 13: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 14: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 15: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 17: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 19: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 20: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 21: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 23: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 25: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 26: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 27: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 29: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 30: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 31: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 1: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 3: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 4: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 5: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 6: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 7: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 8: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 9: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 10: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 11: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 12: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 13: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 14: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 15: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 16: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 17: No activity"></div>
          </div>

          <!-- Continue with more month columns as needed to fill 12 months -->
          <!-- Example: March -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 18: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 19: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 20: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 21: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 22: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 23: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 24: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 25: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 26: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 27: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 28: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 1: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Mar</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 3: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 4: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 6: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 7: No activity"></div>
          </div>
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 10: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 11: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 12: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 13: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 14: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 15: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 16: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 17: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 18: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 19: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 22: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 23: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 24: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 25: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 26: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 27: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 28: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 29: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 30: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 31: No activity"></div>
          </div>
          <!-- End example months -->

          <!-- Placeholder to continue the pattern for more months (e.g., April, May, etc.) -->
          <!-- Copy and paste a 'grid grid-rows-7' block for each additional month, updating 'col-span-1 text-xs' for the month label -->
          <!-- Also update the `title` attribute for each square to reflect the correct date and activity level -->
          <!-- APR -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Apr</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 5: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 11: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 13: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 14: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 15: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 17: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 19: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 23: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 25: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 26: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 27: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 29: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 30: No activity"></div>
          </div>
          <!-- MAY -->
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">May</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 5: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 11: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 13: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 14: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 15: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 17: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 19: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 23: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 25: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 26: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 27: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 29: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 30: No activity"></div>
          </div>
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 31: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 3: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 4: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 5: High"></div>
          </div>
          <!-- JUN -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jun</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-light dark:bg-emerald-darker-3" title="June 6: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="June 10: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 11: Low"></div>
          </div>
          <!-- JUL -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jul</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="July 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="July 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="July 4: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="July 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 6: Moderate"></div>
          </div>
          <!-- AUG -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Aug</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Aug 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Aug 3: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Aug 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Aug 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 6: High"></div>
          </div>
          <!-- SEP -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Sep</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 1: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Sep 2: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Sep 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Sep 4: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 5: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Sep 6: No activity"></div>
          </div>
          <!-- OCT -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Oct</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 1: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Oct 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Oct 3: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Oct 4: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Oct 5: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 6: Low"></div>
          </div>
          <!-- NOV -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Nov</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Nov 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Nov 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Nov 4: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Nov 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 6: Moderate"></div>
          </div>
          <!-- DEC -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Dec</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Dec 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Dec 3: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Dec 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Dec 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 6: High"></div>
          </div>
        </div>
      </div>
      <div class="p-6 border-t border-stone-200 dark:border-stone-700 text-sm text-stone-500 flex justify-between items-center dark:text-stone-400">
        <p>
          <span class="text-emerald-600 dark:text-emerald-400">//</span> Last updated: Today
        </p>
        <p>
          <a href="#" class="text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300">View detailed logs</a>
        </p>
      </div>
    </div>
  </div>
  <style>
    /* Custom scrollbar for better aesthetics, especially in dark mode */
    .custom-scrollbar::-webkit-scrollbar {
      height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.stone.300');
      border-radius: 10px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.stone.700');
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: theme('colors.emerald.500');
      border-radius: 10px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: theme('colors.emerald.400');
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: theme('colors.emerald.600');
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: theme('colors.emerald.300');
    }

    /* Ensure rows line up */
    .grid-rows-7 > div:first-child {
        grid-row: 1 / span 1;
    }

  </style>
</div>

Industrial_Gaming_Data_Table

A complex, responsive data table component designed for gaming websites, featuring an industrial aesthetic with exposed elements and an autumn color scheme. Includes filtering, sorting, pagination, and dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-200 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-800 dark:text-amber-500 mb-6 sm:mb-8 text-center uppercase tracking-wider">
    Game Stats Dashboard
  </h2>

  <!-- Table Container -->
  <div class="bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg border border-amber-300 dark:border-amber-700 overflow-hidden backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80">

    <!-- Controls Section -->
    <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-b border-amber-300 dark:border-amber-700">
      <!-- Search Input -->
      <div class="relative w-full sm:w-64">
        <input type="text" placeholder="Search player, game..." class="w-full pl-10 pr-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-50 dark:bg-stone-800 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 text-stone-800 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-stone-500 dark:text-stone-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>

      <!-- Filter Dropdown -->
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-amber-50 dark:bg-stone-800 border border-amber-400 dark:border-amber-600 text-stone-800 dark:text-stone-200 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400">
          <option>All Games</option>
          <option>FPS</option>
          <option>MOBA</option>
          <option>RPG</option>
          <option>Strategy</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-600 dark:text-stone-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
        </div>
      </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-amber-300 dark:divide-amber-700">
        <thead class="bg-amber-200 dark:bg-stone-800 text-amber-800 dark:text-amber-300 uppercase tracking-wider text-sm">
          <tr>
            <th scope="col" class="px-4 py-3 text-left font-bold">Player & Profile</th>
            <th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer">Game <span class="ml-1 text-xs">▲▼</span></th>
            <th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden sm:table-cell">K/D Ratio <span class="ml-1 text-xs">▲▼</span></th>
            <th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden md:table-cell">Win Rate <span class="ml-1 text-xs">▲▼</span></th>
            <th scope="col" class="px-4 py-3 text-left font-bold cursor-pointer hidden lg:table-cell">Hours Played <span class="ml-1 text-xs">▲▼</span></th>
            <th scope="col" class="px-4 py-3 text-left font-bold">Status</th>
            <th scope="col" class="px-4 py-3 text-right font-bold">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-amber-200 dark:divide-amber-800 text-sm">

          <!-- Row 1 -->
          <tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="flex items-center">
                <img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
                <div class="ml-3">
                  <div class="font-medium text-stone-900 dark:text-stone-100">PhantomStrike</div>
                  <div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 87</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Valorant</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">1.65</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">62%</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">1240</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
              <a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="flex items-center">
                <img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Player Avatar">
                <div class="ml-3">
                  <div class="font-medium text-stone-900 dark:text-stone-100">PixelQueen</div>
                  <div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 71</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">League of Legends</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">2.10</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">58%</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">980</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100/80 dark:bg-red-800 text-red-800 dark:text-red-200 border border-red-300 dark:border-red-600">Offline</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
              <a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="flex items-center">
                <img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Player Avatar">
                <div class="ml-3">
                  <div class="font-medium text-stone-900 dark:text-stone-100">Ironclad_Gamer</div>
                  <div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 93</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Apex Legends</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">1.88</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">65%</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">1500</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
              <a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="flex items-center">
                <img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Player Avatar">
                <div class="ml-3">
                  <div class="font-medium text-stone-900 dark:text-stone-100">SynthWitch</div>
                  <div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 68</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Cyberpunk 2077</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">0.95</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">45%</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">870</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100/80 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-600">Idle</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
              <a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr class="bg-amber-50 even:bg-amber-100 dark:bg-stone-900 dark:even:bg-stone-850 hover:bg-amber-200/50 dark:hover:bg-stone-700/50 transition-colors duration-200">
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="flex items-center">
                <img class="h-9 w-9 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Player Avatar">
                <div class="ml-3">
                  <div class="font-medium text-stone-900 dark:text-stone-100">DarkKnightMC</div>
                  <div class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Level 79</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300">Minecraft</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden sm:table-cell">N/A</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden md:table-cell">N/A</td>
            <td class="px-4 py-3 whitespace-nowrap text-stone-700 dark:text-stone-300 hidden lg:table-cell">2500+</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100/80 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-600">Online</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-200 mr-2">View</a>
              <a href="#" class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300">Report</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-amber-300 dark:border-amber-700">
      <div class="text-stone-600 dark:text-stone-400 text-sm">
        Showing <span class="font-bold">1</span> to <span class="font-bold">5</span> of <span class="font-bold">100</span> results
      </div>
      <nav class="relative z-0 inline-flex shadow-sm rounded-md -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L9.5 10l3.27 3.71a.75.75 0 11-1.08 1.04l-3.75-4.25a.75.75 0 010-1.04l3.75-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-amber-500 dark:border-amber-400 bg-amber-500 dark:bg-amber-600 text-white font-semibold">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
          2
        </a>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300">
          ...
        </span>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 hover:bg-amber-200 dark:hover:bg-stone-700">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L10.5 10 7.23 6.29a.75.75 0 111.08-1.04l3.75 4.25a.75.75 0 010 1.04l-3.75 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

Neon_Glow_Autumn_Loader

A moderately complex loader component with neon/glow effects and autumn colors, suitable for booking and reservation systems. Features responsive design and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-gray-900 p-4">
  <div class="max-w-md w-full bg-orange-50 dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden p-8 border border-orange-200 dark:border-gray-700 relative">
    <!-- Glow effect overlay - Bottom left -->
    <div class="absolute -left-10 -bottom-10 w-48 h-48 bg-orange-300 dark:bg-orange-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-1 z-0"></div>
    <!-- Glow effect overlay - Top right -->
    <div class="absolute -right-10 -top-10 w-48 h-48 bg-burgundy-300 dark:bg-burgundy-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-2 z-0"></div>

    <div class="relative z-10 flex flex-col items-center space-y-8">
      <div class="relative w-24 h-24">
        <!-- Outer ring with glow -->
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-slow-fast"
             style="border-top-color: #f97316; border-right-color: #f97316; filter: drop-shadow(0 0 8px #f97316) drop-shadow(0 0 15px #f97316);"></div>
        <!-- Inner ring with glow -->
        <div class="absolute inset-3 rounded-full border-4 border-transparent animate-spin-slow-fast-reverse"
             style="border-bottom-color: #b91c1c; border-left-color: #b91c1c; filter: drop-shadow(0 0 8px #b91c1c) drop-shadow(0 0 15px #b91c1c);"></div>
        <!-- Center icon placeholder -->
        <div class="flex items-center justify-center w-full h-full rounded-full bg-gradient-to-br from-orange-400 to-burgundy-600 dark:from-orange-700 dark:to-red-900 border-2 border-orange-300 dark:border-red-800">
          <svg class="w-10 h-10 text-white dark:text-gray-100 drop-shadow-[0_0_5px_rgba(255,165,0,0.8)]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="text-center space-y-3">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-900 dark:text-orange-200 tracking-tight glow-text-orange">
          Confirming Your Reservation...
        </h2>
        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-400 max-w-xs mx-auto">
          Please wait a moment while we secure your booking. This may take a few seconds.
        </p>
      </div>

      <!-- Progress dots -->
      <div class="flex space-x-2">
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-1 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-red-600 dark:bg-red-700 animate-bounce-delay-2 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-3 shadow-md glow-dot"></div>
      </div>

      <button type="button" class="bg-orange-600 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-semibold py-2 px-6 rounded-lg text-sm transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative overflow-hidden group border border-orange-500 dark:border-red-900">
        <span class="absolute top-0 left-0 w-full h-full bg-orange-700 dark:bg-red-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blend-hard-light-glow"></span>
        <span class="relative z-10 glow-text-button">Cancel Booking</span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-600 mt-4">
        Status: <span class="font-medium text-gray-600 dark:text-gray-500">Processing...</span>
      </p>
    </div>
  </div>

  <!-- Custom Tailwind CSS Keyframes & Colors -->
  <style>
    @keyframes spin-slow-fast {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-slow-fast-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes bounce-delay {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-8px); }
    }
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.1); opacity: 0.5; }
    }

    .animate-spin-slow-fast {
      animation: spin-slow-fast 1.8s linear infinite;
    }
    .animate-spin-slow-fast-reverse {
      animation: spin-slow-fast-reverse 2s linear infinite;
    }
    .animate-bounce-delay-1 {
      animation: bounce-delay 1s infinite;
    }
    .animate-bounce-delay-2 {
      animation: bounce-delay 1s infinite 0.2s;
    }
    .animate-bounce-delay-3 {
      animation: bounce-delay 1s infinite 0.4s;
    }
    .animate-pulse-slow-1 {
      animation: pulse-slow 5s infinite ease-in-out;
    }
    .animate-pulse-slow-2 {
      animation: pulse-slow 6s infinite ease-in-out 1s;
    }

    /* Custom Glow effects for text and buttons */
    .glow-text-orange {
      text-shadow: 0 0 5px rgba(255, 100, 0, 0.7), 0 0 10px rgba(255, 100, 0, 0.5);
    }
    .dark .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.9), 0 0 16px rgba(255, 165, 0, 0.6);
    }
    .glow-text-button {
      text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.5);
    }
    .glow-dot {
      filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.7));
    }
    .dark .glow-dot {
      filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.9));
    }

    /* Custom colors for Autumn theme (if not already in Tailwind config) */
    .bg-burgundy-300 { background-color: #e49a88; }
    .bg-burgundy-800 { background-color: #6a053c; }
    .bg-burgundy-600 { background-color: #8c0f4f; }
    .text-burgundy-900 { color: #4e0329; }
    .dark\:bg-red-900 { background-color: #7f1d1d; }
    .dark\:border-red-900 { border-color: #7f1d1d; }
    .dark\:text-red-900 { color: #7f1d1d; }
    .dark\:border-red-800 { border-color: #991b1b; }
    .dark\:bg-red-800 { background-color: #991b1b; }

    /* Adjust mix-blend-mode for dark theme better visual */
    .dark .mix-blend-multiply {
      mix-blend-mode: screen;
    }

  </style>
</div>

PlayfulForestAlert

A playful and cheerful alert messages component designed with a forest/green palette, rounded elements, and friendly aesthetics, suitable for business/corporate websites. It's responsive and includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 dark:bg-green-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Success! Your changes have been saved.</h3>
        <p class="text-sm text-green-700 dark:text-green-200">All systems are go. Enjoy a seamless experience.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-green-600 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-100 dark:focus:ring-offset-green-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Info Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.1s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Heads Up! New updates available.</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200">Check out our latest features and improvements.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.2s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 dark:bg-yellow-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Hey! Action needed soon.</h3>
        <p class="text-sm text-yellow-700 dark:text-yellow-200">Your subscription is about to expire. Renew now!</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-yellow-600 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-yellow-100 dark:focus:ring-offset-yellow-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.3s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 dark:bg-red-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Oops! Something went wrong.</h3>
        <p class="text-sm text-red-700 dark:text-red-200">Please try again later or contact support.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-red-600 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-red-100 dark:focus:ring-offset-red-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

Retro_Charity_Registration_Form

A simple, responsive registration form component with a retro/vintage 80s/90s sepia/brown aesthetic, designed for non-profit/charity purposes, including dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-amber-100 dark:bg-stone-900 font-mono text-stone-800 dark:text-stone-200">
  <div class="w-full max-w-md p-6 sm:p-8 space-y-6 bg-amber-50 dark:bg-stone-800 rounded-lg shadow-xl border-2 border-stone-400 dark:border-stone-600 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-amber-900 dark:text-amber-300 mb-2 transform transition-all duration-300 hover:text-amber-700 dark:hover:text-amber-100 drop-shadow-md">
        Join The Cause!
      </h2>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">
        Help us make a difference. Sign up to receive updates and news.
      </p>
    </div>

    <form class="space-y-4">
      <div>
        <label for="full-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Full Name
        </label>
        <input type="text" id="full-name" name="full-name" autocomplete="name"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Your Name Here">
      </div>

      <div>
        <label for="email-address" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Email Address
        </label>
        <input type="email" id="email-address" name="email" autocomplete="email"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="[email protected]">
      </div>

      <div>
        <label for="comments" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Comments (Optional)
        </label>
        <textarea id="comments" name="comments" rows="3"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Anything you'd like to share?"></textarea>
      </div>

      <div class="flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox"
          class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-amber-200 dark:bg-stone-700 transition-colors duration-200">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">
          I agree to the <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Terms</a> and
          <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Privacy Policy</a>.
        </label>
      </div>

      <div>
        <button type="submit"
          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 transition-all duration-300 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Heroicon name: solid/heart -->
            <svg class="h-5 w-5 text-amber-200 group-hover:text-amber-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
            </svg>
          </span>
          Count Me In!
        </button>
      </div>
    </form>
  </div>
</div>

Mega Menu Component

A responsive, corporate-style mega menu for educational platforms, featuring multiple categories, recent courses, and resource links. Includes dark mode support and a clean, trustworthy design with an accent color.

Open Preview

                <nav class="bg-white shadow-lg dark:bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">Edu<span class="text-indigo-600">Hub</span></a>
        </div>
        <div class="hidden md:ml-6 md:flex md:space-x-8">
          <div class="relative group">
            <button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Categories
              <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div class="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-screen max-w-4xl px-2 sm:px-0">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                <div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8 md:grid-cols-2 lg:grid-cols-3">
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Featured Courses</h3>
                    <nav class="mt-4 grid gap-y-2">
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19v-7a2 2 0 012-2h10a2 2 0 012 2v7m-7 4v-4m0 0H9m5 0h2" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Data Science Masterclass</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Learn data analysis, machine learning, and AI.</p>
                        </div>
                      </a>
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H7a2 2 0 00-2 2v11a2 2 0 002 2z" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Web Development Bootcamp</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Build modern websites with HTML, CSS, JavaScript.</p>
                        </div>
                      </a>
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2zm0 0H9m7 0a2 2 0 002-2V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v14a2 2 0 002 2h2a2 2 0 002-2z" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Digital Marketing Fundamentals</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Master SEO, SEM, social media, and more.</p>
                        </div>
                      </a>
                    </nav>
                  </div>
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Browse by Topic</h3>
                    <nav class="mt-4 grid gap-y-2">
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Programming</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Business & Finance</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Design & Creativity</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Health & Fitness</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Language Learning</p>
                      </a>
                    </nav>
                  </div>
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Newest Releases</h3>
                    <div class="mt-4 space-y-4">
                      <div class="flex items-center space-x-4">
                        <img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1018/300/200" alt="Course thumbnail">
                        <div>
                          <a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Advanced Python for AI</a>
                          <p class="text-xs text-gray-500 dark:text-gray-400">Dr. Emily White</p>
                        </div>
                      </div>
                      <div class="flex items-center space-x-4">
                        <img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1025/300/200" alt="Course thumbnail">
                        <div>
                          <a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Financial Modeling with Excel</a>
                          <p class="text-xs text-gray-500 dark:text-gray-400">Prof. David Green</p>
                        </div>
                      </div>
                    </div>
                    <div class="mt-6 text-center">
                      <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
                        View All Courses
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Learning Paths</a>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">For Business</a>
          <div class="relative group">
            <button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Resources
              <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div class="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-48 px-2 pt-2 pb-4 sm:px-0">
              <div class="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 py-1 bg-white dark:bg-gray-900">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Blog</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">FAQs</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Support</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Partnerships</a>
              </div>
            </div>
          </div>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
        </div>
      </div>
      <div class="flex items-center">
        <div class="hidden md:block">
          <div class="ml-4 flex items-center md:ml-6">
            <button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
              <span class="sr-only">View notifications</span>
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>

            <div class="ml-3 relative group">
              <div>
                <button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                  <span class="sr-only">Open user menu</span>
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </button>
              </div>
              <div class="hidden group-hover:block absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md shadow-lg py-1 bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
              </div>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <!-- Mobile menu button -->
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <!--
              Heroicon name: outline/menu

              Menu open: "hidden", Menu closed: "block"
            -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!-- Icon when menu is open. -->
            <!--
              Heroicon name: outline/x

              Menu open: "block", Menu closed: "hidden"
            -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-indigo-50 dark:bg-indigo-800 dark:bg-opacity-50 text-indigo-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Learning Paths</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">For Business</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Resources</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-white">Tom Cook</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 203 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>

CAPTCHA Component - Organic/Nature-inspired (Autumn Colors)

A complex, responsive CAPTCHA component designed with an organic, nature-inspired style using autumn colors, suitable for news/journalism websites. Includes full dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-sm p-6 rounded-2xl shadow-xl bg-white/80 backdrop-blur-sm transform transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80 dark:border dark:border-gray-700 md:max-w-md lg:max-w-lg overflow-hidden relative">
    <!-- Organic Shape Overlay -->
    <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-gradient-to-br from-orange-200 to-amber-300 opacity-60 dark:from-gray-700 dark:to-gray-900 dark:opacity-40 filter blur-xl transform rotate-45"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 rounded-full bg-gradient-to-br from-red-300 to-amber-400 opacity-60 dark:from-gray-800 dark:to-teal-900 dark:opacity-40 filter blur-xl transform -rotate-30"></div>

    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-amber-800 mb-6 text-center dark:text-amber-300 leading-tight tracking-wide">
        <span class="block">Are you a Human?</span>
        <span class="block text-xl font-medium text-orange-600 dark:text-orange-400">A quick check before proceeding</span>
      </h2>

      <!-- Captcha Challenge Area -->
      <div class="bg-orange-50/70 dark:bg-gray-700/60 p-5 rounded-xl border border-orange-200 dark:border-gray-600 mb-6 shadow-inner relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://picsum.photos/600/400?blur=5&grayscale=true')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
        <div class="relative z-10">
          <p class="text-lg text-amber-900 font-semibold mb-4 dark:text-amber-200 text-center">
            Please select all images containing
            <span class="font-extrabold text-red-700 dark:text-red-400">"Autumn Leaves"</span>
          </p>

          <div class="grid grid-cols-3 gap-3 md:gap-4">
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=1" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img1">
                <label for="img1" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=2" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img2">
                <label for="img2" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=3" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img3">
                <label for="img3" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=4" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img4">
                <label for="img4" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=5" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img5">
                <label for="img5" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=6" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img6">
                <label for="img6" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=7" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img7">
                <label for="img7" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=8" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img8">
                <label for="img8" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=9" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img9">
                <label for="img9" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
                </label>
              </div>
            </div>

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

      <div class="flex justify-between items-center mb-6">
        <button class="flex items-center text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.88 1.14 5.518 3 7.493l1.884-1.884m5.348-2.604A7.962 7.962 0 0110 20c-5.14 0-8.862-5.714-8.862-5.714L10 10l-1.884 1.884"></path></svg>
          Reload Challenge
        </button>
        <a href="#" class="text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          Get a new challenge
        </a>
      </div>

      <button class="w-full flex items-center justify-center bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-600/40 dark:bg-amber-600 dark:hover:bg-amber-700 dark:shadow-amber-500/40 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
        Verify
        <svg class="w-5 h-5 ml-2 -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="M9 5l7 7-7 7"></path></svg>
      </button>

      <p class="text-center text-xs text-gray-500 mt-6 dark:text-gray-400">
        Enhanced by <a href="#" class="underline hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">NatureShield™</a>
      </p>
    </div>
  </div>
</div>

Carousel Slider Component

A simple, responsive carousel slider component with clean typography, sepia/brown tones for documentation and knowledge base sites. Includes dark mode support.

Open Preview

                <div class="w-full max-w-4xl mx-auto py-8 px-4 font-sans">
  <div class="relative overflow-hidden group">
    <!-- Carousel Wrapper (using scroll-snap for basic 'slides') -->
    <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth hide-scrollbar transition-all duration-300 ease-in-out
                bg-stone-100 dark:bg-stone-900 rounded-lg shadow-inner border border-stone-200 dark:border-stone-700">
      
      <!-- Slide 1 -->
      <div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
          <span class="text-stone-600 dark:text-stone-300">01 /</span> Introduction to Concepts
        </h2>
        <p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
          This section provides a foundational understanding of the core concepts, ensuring clarity and establishing a solid groundwork for further exploration.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                          dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
          Learn More
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

      <!-- Slide 2 -->
      <div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
          <span class="text-stone-600 dark:text-stone-300">02 /</span> Advanced Topics & Usage
        </h2>
        <p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
          Dive deeper into the intricacies of the system, covering advanced configurations, optimal usage patterns, and best practices for seasoned users.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                          dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
          Read Documentation
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

      <!-- Slide 3 -->
      <div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
          <span class="text-stone-600 dark:text-stone-300">03 /</span> FAQs & Troubleshooting
        </h2>
        <p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
          Find quick answers to frequently asked questions and common issues. This section helps resolve problems efficiently, minimizing downtime.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                          dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
          Visit Support
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

    </div>

    <!-- Navigation Arrows - Left (Requires JS for actual navigation, but styled for appearance) -->
    <button class="absolute left-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Previous slide">
      <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>

    <!-- Navigation Arrows - Right (Requires JS for actual navigation, but styled for appearance) -->
    <button class="absolute right-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Next slide">
      <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>

    <!-- Pagination Dots (Requires JS for actual navigation, but styled for appearance) -->
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
      <span class="block w-3 h-3 rounded-full bg-stone-700 dark:bg-stone-300 transition-colors duration-200"></span>
      <span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
      <span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
    </div>
  </div>

  <!-- Note for JS dependency -->
  <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-400">
    <strong class="font-semibold">Note:</strong> This HTML structure uses <code class="font-mono">scroll-snap</code> for basic slide behavior, but full carousel functionality (button navigation, active dot states, auto-play) would require JavaScript.
  </p>
</div>

<!-- Simple scrollbar hiding for demonstration -->
<style>
  .hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
</style>

Neomorphic Neon Pagination for Music/Audio

A responsive pagination component designed with a neumorphic style and bright neon/electric colors, suitable for music streaming and audio platforms. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black p-4">
  <nav class="flex items-center justify-center space-x-2 p-3 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800
    bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900
    dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(50,50,50,0.3)]
    shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7),5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)]
    max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl duration-300 ease-in-out">

    <!-- Previous Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>

    <!-- Page Numbers / Current Page -->
    <div class="flex space-x-2 sm:space-x-1 md:space-x-2">
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">1</span>
      </a>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">2</span>
      </a>
      <span class="relative inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 text-sm font-semibold
        rounded-lg neumorphic-active
        text-fuchsia-600 dark:text-cyan-500
        shadow-lg dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6)]
        shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7)] 
        border border-fuchsia-400 dark:border-cyan-600
        
        ">
        3
        <span class="absolute inset-0 rounded-lg opacity-40 blur-sm 
          bg-gradient-to-br from-fuchsia-400 to-fuchsia-600 
          dark:from-cyan-400 dark:to-cyan-600"></span>
      </span>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">4</span>
      </a>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">5</span>
      </a>
      <span class="text-fuchsia-500 dark:text-cyan-400 self-center hidden md:block">...</span>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">10</span>
      </a>
    </div>

    <!-- Next Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Next</span>
    </a>
  </nav>

  <style>
    /* Base styles for the neumorphic button */
    .neumorphic-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 0.8rem; /* Equivalent to px-3 py-1.5, slightly tweaked for visual balance */
      font-size: 0.875rem; /* text-sm */
      font-weight: 500; /* font-medium */
      border-radius: 0.5rem; /* rounded-lg */
      color: #9240F0; /* Default text color, will be overridden by specific color classes */
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;

      /* Neumorphic default shadow (light mode) */
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), 
                  -2px -2px 5px rgba(255, 255, 255, 0.8), 
                  inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                  inset -1px -1px 2px rgba(180, 180, 180, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    /* Neumorphic active/pressed state */
    .neumorphic-button:active,
    .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
                inset -3px -3px 6px rgba(255, 255, 255, 0.7);
      border-color: #fca0e5; /* Hot Pink */
    }

    /* Neumorphic hover state (light mode) */
    .neumorphic-button:hover {
      background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
                  -3px -3px 6px rgba(255, 255, 255, 0.9),
                  inset 1px 1px 2px rgba(255, 255, 255, 0.8),
                  inset -1px -1px 2px rgba(190, 190, 190, 0.8);
    }

    /* Dark mode for neumorphic button */
    .dark .neumorphic-button {
      background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
                  -2px -2px 5px rgba(30, 30, 30, 0.6),
                  inset 1px 1px 2px rgba(30, 30, 30, 0.7),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    .dark .neumorphic-button:active,
    .dark .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #1a1a1a, #2b2b2b);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8),
                  inset -3px -3px 6px rgba(40, 40, 40, 0.8);
      border-color: #00BCD4; /* Electric Blue */
    }

    .dark .neumorphic-button:hover {
      background: linear-gradient(145deg, #1f1f1f, #2f2f2f);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8),
                  -3px -3px 6px rgba(40, 40, 40, 0.8),
                  inset 1px 1px 2px rgba(40, 40, 40, 0.8),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.8);
    }

  </style>
</div>

LuxuryNotificationsComponent

A simple, elegant notifications component for social media applications, featuring a luxury/premium design style with muted colors and full responsiveness, including dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 flex justify-center items-start min-h-screen">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Notifications</h2>
    </div>
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Sophie Dubois</span> liked your post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">2 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1015/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">David Chen</span> started following you.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">5 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            Follow Back
          </button>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Emily White</span> commented on your photo.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1084/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 4 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Mark Johnson</span> mentioned you in a post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">3 days ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1040/80/80" alt="Post thumbnail">
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-center">
      <a href="#" class="text-lg text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200">
        View All Notifications
      </a>
    </div>
  </div>
</div>

1 ... 86 87 88 89 90 ... 335