Search Components

All Components

Browse all available Tailwind CSS components

Cyberpunk_Weather_CAPTCHA_Component

A complex, cyberpunk-themed CAPTCHA component for weather/climate data, featuring futuristic neon ocean/blue tones, dark backgrounds, and multiple interactive elements. Fully responsive with dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-blue-300 flex items-center justify-center p-4 dark:bg-gray-950 transition-colors duration-500 font-mono">
  <div class="relative w-full max-w-xl p-8 rounded-xl shadow-2xl border border-blue-800/50 bg-gradient-to-br from-gray-900 to-gray-950 overflow-hidden
              dark:border-blue-700/50 dark:from-gray-900 dark:to-gray-950 transition-colors duration-500">

    <!-- Background Grid/Pattern -->
    <div class="absolute inset-0 z-0 opacity-10">
      <div class="absolute inset-0 bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]"
        style="background-image: linear-gradient(to right, #0A0A0A 1px, transparent 1px), linear-gradient(to bottom, #0A0A0A 1px, transparent 1px);"></div>
    </div>

    <!-- Neon Border Effect -->
    <div class="absolute inset-0 border-4 rounded-xl border-transparent pointer-events-none z-10 animate-pulse-border">
      <div class="absolute -inset-0.5 rounded-xl blur opacity-75 animate-neon-glow bg-gradient-to-r from-blue-600 via-cyan-500 to-blue-600"></div>
    </div>

    <div class="relative z-20 space-y-8">
      <h2 class="text-4xl font-bold text-center uppercase tracking-wider text-blue-400 drop-shadow-lg [text-shadow:0_0_8px_rgb(59_130_246_/_0.7)]">
        <span class="block">Security Protocol // Engage</span>
        <span class="block text-xl text-blue-500/70">"Climate Data Access"</span>
      </h2>

      <div class="bg-gray-800/60 p-6 rounded-lg border border-blue-700/40 shadow-inner space-y-6">
        <div class="flex items-center justify-between text-lg text-blue-300">
          <span class="flex items-center space-x-2">
            <svg class="w-6 h-6 text-cyan-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="M8 11V7a4 4 0 118 0v4m-5 3h2m-6 4h8a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z"></path></svg>
            Access Key Authorization
          </span>
          <svg class="w-6 h-6 text-blue-500 animate-spin-slow" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37zm3.504 5.959a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </div>

        <p class="text-blue-200/90 text-sm md:text-base">To proceed, please identify the weather patterns that match the 'Glacial Anomaly Index' below:</p>

        <!-- CAPTCHA Grid -->
        <div class="grid grid-cols-3 gap-3 md:gap-4 lg:grid-cols-4">
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1041/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1043/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1049/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1050/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1052/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1053/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1055/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
          <div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
            <img src="https://picsum.photos/id/1063/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            <div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </div>
        </div>

        <!-- Reload and Audio Buttons -->
        <div class="flex justify-around pt-2 text-blue-400">
          <button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356-2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-6.356-2H20v-5"></path></svg>
            <span>Reload Directive</span>
          </button>
          <button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19a2 2 0 002 2h2a2 2 0 002-2M9 19V6a3 3 0 003-3h.01M6 16V9a3 3 0 003-3m-6 0h.01M6 16a3 3 0 003 3"></path></svg>
            <span>Audio Scan</span>
          </button>
        </div>
      </div>

      <!-- Verify Button -->
      <button class="w-full flex items-center justify-center py-4 px-6 rounded-lg font-bold text-xl uppercase tracking-wider
                     bg-gradient-to-r from-blue-600 to-cyan-500 text-white shadow-lg 
                     hover:from-blue-700 hover:to-cyan-600 transition-all duration-300
                     focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75
                     scale-100 hover:scale-[1.01] active:scale-[0.99] transform">
        <svg class="w-7 h-7 mr-3 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Verify Bio-Signature
      </button>

      <p class="text-center text-blue-400/60 text-xs mt-6">
        Warning: Unauthorized bypass attempts will trigger Protocol 7. <br class="sm:hidden"/>System Log: <span class="text-yellow-400">//IP [REDACTED]</span>
      </p>
    </div>
  </div>
</div>

<style>
  /* Base for defining custom animations in Tailwind */
  @keyframes pulse-border {
    0%, 100% { border-color: rgba(59, 130, 246, 0.5); }
    50% { border-color: rgba(6, 182, 212, 0.7); }
  }
  @keyframes neon-glow {
    0%, 100% { filter: blur(4px) brightness(1.2); opacity: 0.75; }
    50% { filter: blur(8px) brightness(1.5); opacity: 0.9; }
  }
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-pulse-border {
    animation: pulse-border 4s infinite ease-in-out;
  }
  .animate-neon-glow {
    animation: neon-glow 3s infinite alternate ease-in-out;
  }
  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  /* Aspect Ratio Utility Classes (modern alternative to aspect-w/h) */
  /* For Tailwind JIT/v3: Enable 'aspectRatio' in tailwind.config.js */
  /* If not using JIT or v3, include these manually: */
  .aspect-w-1 {
    aspect-ratio: 1 / 1;
  }
</style>

Retro_Gaming_Audio_Player

A retro/vintage-themed audio player component designed for gaming websites, featuring a complementary color scheme, responsive layout, and dark mode support. It mimics an 80s/90s aesthetic with a cassette tape visual.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-800 via-pink-700 to-orange-600 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-800 dark:to-gray-950 rounded-lg p-6 shadow-2xl border-4 border-gray-900 dark:border-gray-700 font-mono transform hover:scale-103 transition-transform duration-300 relative overflow-hidden">
    <!-- Top 'Display' Section -->
    <div class="h-16 w-full bg-gradient-to-r from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 rounded-md mb-4 flex items-center justify-around">
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REC</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">PLAY</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">FF</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REW</div>
    </div>

    <!-- Cassette Tape Area -->
    <div class="relative bg-gradient-to-br from-red-600 to-purple-800 dark:from-purple-800 dark:to-pink-900 rounded-lg p-4 mb-6 shadow-inner border-2 border-orange-500 dark:border-purple-600 flex justify-center items-center h-48 sm:h-56 md:h-64 lg:h-72 aspect-video">
      <!-- Cassette Spools -->
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 left-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 right-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <!-- Cassette Label/Display -->
      <div class="absolute w-2/3 h-2/3 bg-gray-200 dark:bg-gray-700 border-2 border-gray-500 dark:border-gray-900 rounded-md flex flex-col justify-center items-center p-2 text-center">
        <p class="text-xs sm:text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">Game Mix '89</p>
        <p class="text-xxs sm:text-xs text-gray-600 dark:text-gray-400 mb-1">Track 03: 'Cyber Runner'</p>
        <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full relative overflow-hidden">
          <div class="absolute h-full bg-green-500 dark:bg-green-400" style="width: 65%;"></div>
        </div>
      </div>
    </div>

    <!-- Controls Grid -->
    <div class="grid grid-cols-3 gap-3 md:grid-cols-5 md:gap-4 lg:grid-cols-6 lg:gap-5">
      <button aria-label="Record" class="col-span-1 p-3 sm:p-4 bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-red-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Play" class="col-span-1 p-3 sm:p-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.528 8.046a.75.75 0 00-.757-.107l-3.5 1.75A.75.75 0 005 10.37V15.5a.75.75 0 001.121.65l3.5-1.75a.75.75 0 00.107-.757L9.528 8.046z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Stop" class="col-span-1 p-3 sm:p-4 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7A.75.75 0 008 7.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 008.75 7z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Previous Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.79 5.23A.75.75 0 0113.75 6v8a.75.75 0 01-1.28.53l-3.5-4a.75.75 0 010-1.06l3.5-4a.75.75 0 01.54-.22zM7.5 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Next Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.21 14.77A.75.75 0 016.25 14V6a.75.75 0 011.28-.53l3.5 4a.75.75 0 010 1.06l-3.5 4a.75.75 0 01-.54.22zM12.5 12.25a.75.75 0 001.5 0v-4.5a.75.75 0 00-1.5 0v4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Eject" class="col-span-1 p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-orange-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75a.75.75 0 00-1.06 0l-.75.75zm9.56-.75a.75.75 0 00-1.06 0l-.75.75a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75zM10 18a8 8 0 100-16 8 8 0 000 16zM10 5a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0010 5z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Volume Slider (placeholder for functionality) -->
    <div class="mt-6">
      <label for="volume" class="block text-gray-200 dark:text-gray-400 text-sm mb-2 uppercase tracking-wide">Volume</label>
      <input type="range" id="volume" name="volume" min="0" max="100" value="70" class="w-full h-3 bg-gray-500 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg accent-orange-400 dark:accent-purple-400">
    </div>

    <!-- Small decorative lights/indicators -->
    <div class="absolute bottom-4 left-4 flex space-x-2">
      <div class="w-3 h-3 bg-red-400 dark:bg-red-600 rounded-full animate-pulse"></div>
      <div class="w-3 h-3 bg-yellow-400 dark:bg-yellow-600 rounded-full"></div>
    </div>

    <!-- Decorative grills -->
    <div class="absolute bottom-4 right-4 h-6 w-16 bg-gray-600 dark:bg-gray-800 rounded-full flex items-center justify-between px-2">
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
    </div>
  </div>
</div>

<style>
  /* Custom spin animation for cassette spools */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }

  /* Custom range slider styling for retro feel */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    margin-top: -8px; /* Adjust for Firefox */
  }

  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-webkit-slider-runnable-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-moz-range-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  /* Tailwind's accent property for range input uses CSS custom properties.
     We define them here to ensure consistent color application for thumbs. */
  :root {
    --tw-accent-orange-400: #fbbf24;
    --tw-accent-purple-400: #a78bfa;
  }

  /* Apply solid color to these elements as they are not gradients */
  .accent-orange-400 {
    color: var(--tw-accent-orange-400);
  }
  .dark .accent-purple-400 {
    color: var(--tw-accent-purple-400);
  }
</style>

Chat Window Component

A responsive chat window component designed with a paper/print-inspired aesthetic, using sepia/brown tones. Includes dark mode support and interactive elements suitable for dating or social platforms.

Open Preview

                <div class="min-h-screen bg-orange-50 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-900 rounded-lg shadow-xl overflow-hidden border border-stone-200 dark:border-stone-800 flex flex-col" style="box-shadow: 8px 8px 0px 0px rgba(100, 70, 0, 0.1);">

    <!-- Header -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div>
          <h2 class="font-bold text-lg leading-tight text-amber-800 dark:text-amber-300">Elara Vance</h2>
          <p class="text-sm text-stone-600 dark:text-stone-400">Online now</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V10h4V7a1 1 0 011-1h2.586l.293-.293A1 1 0 0117 4.586V6h4a1 1 0 011 1v4a1 1 0 01-1 1h-1.586l-.293.293A1 1 0 0117 15.414V14H7a1 1 0 01-1-1v-4a1 1 0 011-1h10a1 1 0 001-1V7a1 1 0 00-1-1h-2v4z" />
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Container -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 bg-orange-50 dark:bg-stone-950 border-t border-b border-stone-200 dark:border-stone-800" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGcgZmlsbD0iI0FBQjBBQiIgZmlsbC1vcGFjaXR5PSIuMDgiPgogICAgICA8cGF0aCBkPSJNNiAxOXY0Mmg0OFYxOUg2em00MCA1aDJhMSA0IDEgNCAxIDQ0LTQgMWgxMmE0IDEgNFY3SDQyem0xMiA0MmE0IDEgNCAxIDQgMWgtMzJhMSA0IDEgNC4wNi00LjA2IDEtMy45NC0xem0tNDAgNHYaMWExIDEgMSAwIDAxLjAxLS41MiAxIDEgMSAwIDAgMSA0LjE2LTQwLjMzIDEtMy44Ny0xem00Mi45NiAyYzAtMi42NiA4LjMtNC4zMiAxMi00Ljc0VjE0SDM4VjEwSDIyVjdIMTkgMi45M0E0IDEgNCAxIDQuMDIgMS4zNSA0IDEgNCAxIDQuMDJWMmgwTTAgNzBoNDh2MTJMMzYgODJMMjQgOTRMMTUgMTAzSDR6bTYwLTQwaC0xMnYxMmwxMiA4LS43NC0uNjJWMTEyem0yMCAyaDNhMSAxIDEgMCAxIDAtNiAwTTAgMGgwVjIwaDQ4djcuNjlhMSAxIDEgMCAxLS42OC41OGwtLjIyLS4wMiAxLjQ4LTQuOTZhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek01MSAyMEE0IDEgNCAxIDI0LjAyIDUwem0tMjYtMTguMjNhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek0xMyA3MmgwVjU2QTYgNiA2IDAgMDE2IDYySDUwYTYgNiA2IDAgMDE1LTUgNTYtNWExIDUgMSA1IDEwLjAyLS41NCazPgogICAgPC9nPgo8L3N2Zz4=');
      background-size: 60px 60px; background-repeat: repeat;">

      <!-- Received message -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>Hey there! Your profile looked really interesting. I love your passion for classic literature.</p>
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:30 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>Oh, thank you! I spend a lot of time in libraries. What kind of books are you into?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:32 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

      <!-- Received message with image -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>I'm a big fan of historical fiction and anything that transports me to another era.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Shared Image" class="mt-2 rounded-lg object-cover w-full h-auto max-h-48">
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:35 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>That's awesome! I just finished 'The Nightingale' by Kristin Hannah. Have you read it?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:38 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

    </div>

    <!-- Message Input -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-3">
      <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" />
        </svg>
      </button>
      <input type="text" placeholder="Type your message..." class="flex-1 py-2 px-4 rounded-full bg-white dark:bg-stone-900 border border-stone-300 dark:border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm sm:text-base placeholder:text-stone-500 dark:placeholder:text-stone-400">
      <button class="p-2 rounded-full bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-colors duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>

  </div>
</div>

3D_Candy_Music_Player_Progress

A complex, 3D-inspired music player progress indicator component with candy/sweet colors, suitable for music streaming and audio platforms. Features responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
    border border-pink-200 dark:border-gray-700
    hover:shadow-2xl hover:scale-[1.01]
    relative
    before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">

    <!-- Background '3D' elements -->
    <div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
    <div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>

    <div class="relative z-10 space-y-6">
      <!-- Song Info & Album Art -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
          bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
          hover:scale-105 hover:rotate-3"> 
          <!-- 3D effect border -->
          <div class="absolute inset-0.5 rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
          </div>
          <div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
        </div>
        <div class="text-center sm:text-left">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
            Dreamy Synthwave
          </h3>
          <p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
            <span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="relative py-4">
        <div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
          <!-- 3D 'track' -->
          <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
          <div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>

          <!-- Progress fill -->
          <div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
            style="width: 65%;">
            <!-- Inner 3D sparkle -->
            <div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
            <!-- 3D 'edge' -->
            <div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
          </div>

          <!-- Playhead 'knob' -->
          <div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
            flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
            style="left: 65%; transform: translateX(-50%) translateY(-50%);">
            <div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
          <span class="font-medium">2:35</span>
          <span class="font-medium">3:45</span>
        </div>
      </div>

      <!-- Volume/Playback Speed Bars (mini-progress indicators) -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
        <div>
          <label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
          <div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
              style="width: 80%;"></div>
          </div>
        </div>
        <div>
          <label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
          <div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
              style="width: 50%;"></div>
          </div>
        </div>
      </div>

      <!-- Controls (example, not focus of progress) -->
      <div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- < Previous Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
        <button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
          transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
          relative overflow-hidden group"
          aria-label="Play">
          <div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
          <!-- Play Icon -->
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- Next Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
        </button>
      </div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect and animations -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Glow effects */
  .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
  }
  .dark .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
  }

  .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
  }
  .dark .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
  }

  .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
  }
  .dark .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
  }

  .glow-white {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  }

</style>

Luxury Dropdown Menu for Finance

An elegant, responsive dropdown menu component designed for financial and banking interfaces, featuring a black and white color scheme with a subtle accent, dark mode support, and sophisticated typography. Compatible with desktop, tablet, and mobile views.

Open Preview

                <div class="relative inline-block text-left font-serif">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 transition duration-150 ease-in-out" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Accounts & Services
      <svg class="-mr-1 ml-2 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="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>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-credit-card mr-2 text-gray-500 dark:text-gray-400"></i> Checking Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-piggy-bank mr-2 text-gray-500 dark:text-gray-400"></i> Savings Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-hand-holding-usd mr-2 text-gray-500 dark:text-gray-400"></i> Loans & Credit
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-chart-line mr-2 text-gray-500 dark:text-gray-400"></i> Investments
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-wallet mr-2 text-gray-500 dark:text-gray-400"></i> Online Banking
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-headset mr-2 text-gray-500 dark:text-gray-400"></i> Customer Support
      </a>
    </div>
  </div>
</div>

<!-- To make the dropdown interactive, you would typically use a small amount of JavaScript.
     For example, a simple toggle on button click to add/remove 'hidden' class from the dropdown panel.
     Since the prompt strictly forbids JavaScript, this example shows the structure 
     and styling for both states (button and dropdown content) as per Tailwind CSS usage. -->

<!-- To simulate interactivity for demonstration, you can manually remove 'hidden' class from the dropdown panel div.
     Example: <div class="origin-top-right absolute right-0 [...] z-10" role="menu" ...> -->

Sidebar Navigation Component - Agriculture/Farming

A complex, minimalist sidebar navigation component designed for agriculture/farming websites. Features jewel-tone colors, full responsiveness, dark mode support, and multiple interactive elements suitable for dashboards and management systems in farming contexts.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">

  <!-- Overlay for mobile when sidebar is open -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden" id="sidebar-overlay"></div>

  <!-- Sidebar -->
  <aside class="w-64 bg-gradient-to-br from-emerald-600 to-emerald-800 dark:from-emerald-800 dark:to-emerald-950 text-white p-4 space-y-6 flex flex-col transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 lg:relative" id="sidebar">

    <!-- Sidebar Header / Logo -->
    <div class="flex items-center justify-between pb-4 border-b border-emerald-500 dark:border-emerald-700">
      <a href="#" class="flex items-center space-x-2 text-2xl font-bold tracking-wider text-white">
        <svg class="w-8 h-8" 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.663 17h4.673M12 3v14m-7 0h14a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <span>FarmFlow</span>
      </a>
      <button id="close-sidebar" class="lg:hidden text-white focus:outline-none">
        <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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-1 space-y-2">
      <a href="#dashboard" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group active:bg-emerald-700 dark:active:bg-emerald-900">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-7-7v10a1 1 0 01-1 1h-3m-6 0v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9m-6 0h6m6 0h6"></path>
        </svg>
        <span class="font-medium">Dashboard</span>
      </a>

      <a href="#fields" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M17 14v6m-3-3h6m-10 0H4M7 10h10M4 7h16.71M4 20h16.71M6 14v6m-3-3h6"></path>
        </svg>
        <span class="font-medium">Fields & Crops</span>
      </a>

      <div x-data="{ open: false }" class="relative">
        <button @click="open = !open" class="flex items-center justify-between w-full p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group focus:outline-none">
          <div class="flex items-center space-x-3">
            <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            <span class="font-medium">Inventory</span>
          </div>
          <svg :class="{ 'rotate-90': open, '': !open }" class="w-4 h-4 transform transition-transform 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="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </button>
        <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-y-95" x-transition:enter-end="opacity-100 transform scale-y-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 transform scale-y-100" x-transition:leave-end="opacity-0 transform scale-y-95" class="ml-4 mt-1 space-y-1 text-sm" style="display: none;">
          <a href="#seeds" class="flex items-center space-x-2 p-2 rounded-md text-emerald-200 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <span class="w-1 h-1 bg-emerald-300 rounded-full"></span>
            <span>Seeds & Fertilizers</span>
          </a>
          <a href="#equipment" class="flex items-center space-x-2 p-2 rounded-md text-emerald-200 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <span class="w-1 h-1 bg-emerald-300 rounded-full"></span>
            <span>Equipment</span>
          </a>
        </div>
      </div>
      
      <a href="#weather" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8z"></path>
        </svg>
        <span class="font-medium">Weather Forecast</span>
      </a>

      <a href="#reports" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M9 17v-2m3 2v-4m3 2v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <span class="font-medium">Reports & Analytics</span>
      </a>

      <a href="#settings" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>

    <!-- User Profile / Footer -->
    <div class="mt-auto pt-6 border-t border-emerald-500 dark:border-emerald-700">
        <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <img class="w-10 h-10 rounded-full border-2 border-emerald-300 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="flex-1">
                <p class="text-white font-semibold">John Wick</p>
                <p class="text-emerald-200 text-sm">Farm Manager</p>
            </div>
            <button class="text-emerald-200 hover:text-white focus:outline-none">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                </svg>
            </button>
        </div>
    </div>

  </aside>

  <!-- Main Content Area (example) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Dashboard Overview</h1>
      <button id="open-sidebar" class="lg:hidden text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg class="w-8 h-8" 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 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Content Grid Example -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Field Status</h2>
        <p class="text-gray-600 dark:text-gray-400">Monitor the health and growth of your crops.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Field" class="mt-4 rounded-md">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Tasks</h2>
        <ul class="list-disc list-inside text-gray-600 dark:text-gray-400">
          <li>Harvest corn - Oct 25</li>
          <li>Fertilize wheat - Oct 28</li>
          <li>Pest control - Nov 01</li>
        </ul>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Weather Alert</h2>
        <p class="text-gray-600 dark:text-gray-400">Heavy rainfall expected tomorrow. Prepare irrigation systems.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Weather" class="mt-4 rounded-md">
      </div>
    </div>
  </main>

</div>

<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('sidebar');
    const openSidebarBtn = document.getElementById('open-sidebar');
    const closeSidebarBtn = document.getElementById('close-sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    function toggleSidebar() {
      sidebar.classList.toggle('-translate-x-full');
      sidebarOverlay.classList.toggle('hidden');
    }

    openSidebarBtn.addEventListener('click', toggleSidebar);
    closeSidebarBtn.addEventListener('click', toggleSidebar);
    sidebarOverlay.addEventListener('click', toggleSidebar);

    // Dark mode toggle (basic example, typically managed by a separate script/local storage)
    // For demonstration, you can manually toggle 'dark' class on the html tag for testing
    // Add a button in your main content or header to toggle this class if needed.
  });

  // To make dark mode persistent, you'd typically add a JS snippet like this:
  // if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  //   document.documentElement.classList.add('dark')
  // } else {
  //   document.documentElement.classList.remove('dark')
  // }
  // // Whenever the user explicitly chooses light mode
  // localStorage.theme = 'light'
  // // Whenever the user explicitly chooses dark mode
  // localStorage.theme = 'dark'
  // // Whenever the user explicitly chooses to respect the OS preference
  // localStorage.removeItem('theme')
</script>

CRM_Data_Visualization_Component

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

Open Preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  </div>

</div>

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

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

Sports_Fitness_Dashboard_Monospace

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

Open Preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    </main>

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

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

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

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

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

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

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

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

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

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

</div>

ArtDecoCryptoDataTable

A simple, responsive data table component for cryptocurrency/blockchain applications, designed with Art Deco-inspired geometric patterns and an analogous color scheme. Includes dark mode support.

Open Preview

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

  <!-- Table Container -->
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-green-200 dark:border-teal-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    
    <!-- Header with Art Deco flair -->
    <div class="px-6 py-4 border-b border-green-300 dark:border-teal-700 bg-green-100 dark:bg-gray-900
                relative overflow-hidden">
      <h2 class="text-2xl sm:text-3xl font-bold text-teal-800 dark:text-teal-400 mb-2 tracking-wider uppercase font-serif">
        Crypto Asset Overview
      </h2>
      <p class="text-sm text-green-700 dark:text-teal-300">Live market data for your blockchain journey.</p>
      <!-- Art Deco geometric pattern overlay -->
      <div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M0 0 L25 100 L50 0 L75 100 L100 0 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-teal-600 dark:text-teal-400"/>
          <path d="M0 100 L25 0 L50 100 L75 0 L100 100 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-green-600 dark:text-green-400"/>
        </svg>
      </div>
    </div>

    <!-- Table Wrapper -->
    <div class="overflow-x-auto relative">
      <table class="min-w-full divide-y divide-green-200 dark:divide-teal-700">
        <thead class="bg-green-50 dark:bg-gray-850 font-medium text-xs uppercase tracking-wider text-green-700 dark:text-teal-300">
          <tr>
            <th scope="col" class="px-6 py-3 text-left">Asset</th>
            <th scope="col" class="px-6 py-3 text-right">Price</th>
            <th scope="col" class="px-6 py-3 text-right hidden sm:table-cell">24h Change</th>
            <th scope="col" class="px-6 py-3 text-right hidden md:table-cell">Volume (24h)</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-green-100 dark:divide-teal-800">
          
          <!-- Row 1 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/60/100/100" alt="Bitcoin Logo">
                <span class="font-semibold">Bitcoin</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">BTC</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$65,432.10</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+1.23%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$34.5B</td>
          </tr>

          <!-- Row 2 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/66/100/100" alt="Ethereum Logo">
                <span class="font-semibold">Ethereum</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ETH</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$3,210.50</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-0.87%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$18.2B</td>
          </tr>

          <!-- Row 3 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/67/100/100" alt="Cardano Logo">
                <span class="font-semibold">Cardano</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ADA</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$0.4567</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+2.10%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$0.5B</td>
          </tr>

          <!-- Row 4 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/68/100/100" alt="Solana Logo">
                <span class="font-semibold">Solana</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">SOL</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$145.80</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-1.55%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$1.2B</td>
          </tr>

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

    <!-- Footer -->
    <div class="px-6 py-3 border-t border-green-200 dark:border-teal-700 bg-green-100 dark:bg-gray-900 text-right text-xs text-green-700 dark:text-teal-300">
      Data provided by Placeholder API. Last updated: <time datetime="2023-10-27T10:00:00Z">Oct 27, 2023</time>
    </div>

  </div>
</div>

Skip to Content Link Component

A neumorphic 'Skip to Content' link component for accessibility in Technology/SaaS applications, featuring a purple/violet color scheme and full responsiveness with dark mode support.

Open Preview

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a148c,
                -6px -6px 12px #9c27b0;
  }
</style>

1 ... 13 14 15 16 17 ... 335

Search Components

Categories

All Components