Search Components

All Components

Browse all available Tailwind CSS components

Bauhaus Audio Player Component

A complex, responsive audio player component designed with Bauhaus principles for sports/fitness applications, featuring a black and white base with a striking accent color. Includes playback controls, progress bar, volume control, track list, and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>

Neon_Glow_Video_Player

A simple, responsive video player component for business/corporate websites, featuring neon/glow effects and a warm sunset color scheme. Includes dark mode support.

Open Preview

                <div class="flex justify-center items-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800">
  <div class="w-full max-w-4xl bg-gradient-to-br from-amber-500 to-red-500 p-1 sm:p-2 rounded-xl shadow-xl dark:from-red-700 dark:to-orange-700 dark:shadow-2xl dark:shadow-red-900/50 transform hover:scale-[1.01] transition-all duration-300 ease-in-out glow-border">
    <div class="relative pb-[56.25%] overflow-hidden rounded-lg">
      <iframe
        class="absolute top-0 left-0 w-full h-full rounded-lg"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-story"
        allowfullscreen
        title="Corporate Introduction Video"
      ></iframe>
    </div>
    <div class="mt-4 flex flex-col sm:flex-row justify-between items-center px-2 py-2">
      <h3 class="text-lg sm:text-xl font-bold text-white mb-2 sm:mb-0 drop-shadow-[0_0_5px_rgba(255,165,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(255,90,0,0.9)]">
        Innovating the Future of Business
      </h3>
      <button class="px-4 py-2 bg-white text-orange-600 rounded-lg text-sm font-semibold shadow-md
                     hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-amber-500
                     dark:bg-orange-800 dark:text-white dark:hover:bg-orange-700 dark:focus:ring-orange-500 dark:focus:ring-offset-red-700
                     glow-button">
        Learn More
      </button>
    </div>
  </div>
</div>

<style>
  /* Base glow effect for the container */
  .glow-border {
    box-shadow: 0 0 15px rgba(255, 120, 0, 0.6), /* Warm orange glow */
                0 0 30px rgba(255, 80, 0, 0.4), /* Deeper orange */
                inset 0 0 10px rgba(255, 180, 0, 0.3); /* Inner slight glow */
    animation: pulse-glow 2s infinite alternate;
  }

  .dark .glow-border {
    box-shadow: 0 0 15px rgba(255, 60, 0, 0.8),
                0 0 30px rgba(255, 0, 0, 0.6),
                inset 0 0 10px rgba(255, 90, 0, 0.4);
  }

  .glow-button {
    box-shadow: 0 0 8px rgba(255, 180, 0, 0.5);
    transition: all 0.3s ease-in-out;
  }

  .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 160, 0, 0.8), 0 0 20px rgba(255, 120, 0, 0.6);
  }

  .dark .glow-button {
    box-shadow: 0 0 8px rgba(255, 90, 0, 0.7);
  }
  
  .dark .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 70, 0, 0.9), 0 0 20px rgba(255, 0, 0, 0.7);
  }

  @keyframes pulse-glow {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 1; transform: scale(1.005); }
  }
</style>

Wishlist Component

A responsive wishlist component for sports/fitness applications, featuring microinteractions, high-contrast color scheme, and dark mode support. Users can add/remove items and see visual feedback.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-12 text-center">
      Your Fitness Wishlist
    </h2>

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

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=1" alt="Sports Item 1" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Pro Training Shoes</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">High-performance running shoes designed for speed and comfort.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$120.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-bounce-custom" style="animation-iteration-count: infinite;">10% OFF</div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=2" alt="Sports Item 2" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Smart Fitness Tracker</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Monitor your heart rate, steps, and sleep with advanced precision.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$85.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=3" alt="Sports Item 3" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Ergonomic Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Non-slip surface and extra cushioning for optimal yoga and pilates sessions.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$45.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=4" alt="Sports Item 4" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Durable Dumbbell Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Adjustable weights for versatile strength training workouts at home.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$150.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=5" alt="Sports Item 5" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Hydration Backpack</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Lightweight and spacious backpack for long runs or hikes.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$60.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=6" alt="Sports Item 6" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Resistance Band Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Versatile bands for strength, flexibility, and rehabilitation exercises.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$30.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-4 bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600 text-white text-lg sm:text-xl font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 group">
        <svg class="w-6 h-6 mr-3 group-hover:rotate-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for bounce-custom animation */
  @keyframes bounce-custom {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .animate-bounce-custom {
    animation-name: bounce-custom;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
</style>

Add to Cart Button Component - Memphis Grayscale Weather

A complex 'Add to Cart' button component with Memphis design inspiration using a grayscale color scheme, adapted for a weather/climate product. Features include a dynamic icon, loading state, pulse animation, and an item count, all responsive and with dark mode support. This component is designed as a playful yet functional call-to-action for weather data subscriptions or climate-related products.

Open Preview

                <div class="flex items-center justify-center p-4 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <div class="relative w-full max-w-sm rounded-[24px] overflow-hidden shadow-xl 
              bg-white dark:bg-neutral-800 
              border-4 border-black dark:border-white
              transform skew-y-3 rotate-1 scale-95 transition-all duration-300 ease-in-out
              hover:skew-y-0 hover:rotate-0 hover:scale-100">
    
    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <div class="absolute -top-10 -left-10 w-32 h-32 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
      <div class="absolute -bottom-5 -right-5 w-24 h-24 bg-neutral-700 dark:bg-neutral-300 transform rotate-45"></div>
      <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-neutral-500 dark:bg-neutral-500 transform skew-x-12"></div>
      <div class="absolute bottom-1/3 left-1/3 w-20 h-20 bg-neutral-400 dark:bg-neutral-600 rounded-lg"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 flex flex-col items-center justify-center space-y-6">

      <!-- Product Title/Description (Example: Weather Data Package) -->
      <h2 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-neutral-50 text-center uppercase tracking-wide 
                 transform -skew-x-6 bg-neutral-200 dark:bg-neutral-700 p-2 rounded-lg">
        Premium Climate Insights
      </h2>
      <p class="text-md sm:text-lg text-neutral-700 dark:text-neutral-200 text-center max-w-xs leading-relaxed">
        Unlock 7-day extended forecasts & historical data.
      </p>

      <div class="flex items-center space-x-4 mb-4">
        <!-- Price Display -->
        <span class="text-4xl sm:text-5xl font-extrabold text-neutral-900 dark:text-neutral-50 
                     flex items-center skew-y-2 
                     bg-neutral-300 dark:bg-yellow-500 
                     border-4 border-black dark:border-white
                     px-4 py-2 rounded-xl shadow-lg relative z-10">
          <span class="block transform -rotate-6 relative top-1 text-2xl">$</span>29.99
        </span>
        <!-- Icon for Weather/Climate -->
        <img src="https://raw.githubusercontent.com/twbs/icons/main/icons/cloud-sun-fill.svg" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20 
             text-neutral-600 dark:text-neutral-300
             filter drop-shadow-lg
             transform rotate-12 transition-transform duration-300 hover:rotate-0 dark:invert">
      </div>

      <!-- Dynamic Add to Cart Button -->
      <button type="button" class="group relative overflow-hidden h-16 w-full rounded-full 
                                  bg-black dark:bg-white
                                  text-white dark:text-black
                                  text-xl sm:text-2xl font-bold uppercase tracking-wider 
                                  flex items-center justify-center 
                                  shadow-xl 
                                  border-4 border-neutral-700 dark:border-neutral-300
                                  transform skew-x-3 transition-transform duration-300 
                                  hover:skew-x-0 hover:scale-105 
                                  focus:outline-none focus:ring-4 focus:ring-neutral-400 dark:focus:ring-neutral-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800">
        
        <span class="absolute inset-0 bg-neutral-800 dark:bg-neutral-200 transform scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 ease-out z-0"></span>
        
        <!-- Button content -->
        <span class="relative z-10 flex items-center space-x-3 transition-transform duration-300 group-hover:-translate-y-full group-[.added]:translate-x-0 group-[.loading]:translate-x-0">
          <span>Add to Cart</span>
          <svg class="w-7 h-7 fill-current transition-all duration-300 group-hover:rotate-[360deg]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 11H9.83L12.59 8.24L11.17 6.83L7 11L11.17 15.17L12.59 13.76L9.83 11H17V11Z" />
            <path d="M17 12H7V10H17V12Z" class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
          </svg>
        </span>

        <!-- Added state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.added]:translate-y-0">
          <span>Added!</span>
          <svg class="w-7 h-7 fill-current animate-bounce" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6L9 16.2Z"/>
          </svg>
        </span>

        <!-- Loading state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.loading]:translate-y-0">
          <svg class="animate-spin h-7 w-7 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          Loading...
        </span>

      </button>

      <!-- Quantity Selector / Item Count -->
      <div class="flex items-center space-x-4 mt-4 text-neutral-800 dark:text-neutral-100">
        <span class="text-lg sm:text-xl font-semibold 
                     transform -rotate-3 leading-none opacity-80
                     bg-neutral-200 dark:bg-neutral-700 px-3 py-1 rounded-full">
          Items:
        </span>
        <div class="flex items-center space-x-2 
                    bg-neutral-300 dark:bg-neutral-600 
                    border-2 border-black dark:border-white
                    rounded-xl shadow-inner p-1">
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform rotate-6 hover:rotate-0">-</button>
          <span class="w-12 h-12 flex items-center justify-center 
                       text-3xl font-extrabold 
                       border-l-2 border-r-2 border-neutral-600 dark:border-neutral-300 
                       text-neutral-900 dark:text-neutral-50">
            1
          </span>
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform -rotate-6 hover:-rotate-0">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To demonstrate states, one would typically add JS to toggle 'added' and 'loading' classes on the button -->
<!-- Example: -->
<!-- <script>
  const button = document.querySelector('.group.relative');
  button.addEventListener('click', () => {
    button.classList.add('loading');
    setTimeout(() => {
      button.classList.remove('loading');
      button.classList.add('added');
      setTimeout(() => {
        button.classList.remove('added');
        // Optionally reset button or show another state
      }, 2000); // Display 'Added!' for 2 seconds
    }, 1500); // Simulate loading for 1.5 seconds
  });
</script> -->

Weather_Climate_Retro_Dark_Dashboard

A simple, retro-themed dark mode dashboard component for weather and climate data, responsive across all devices.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-400 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-900">

  <div class="max-w-6xl mx-auto space-y-6">

    <!-- Header/Title -->
    <div class="flex flex-col sm:flex-row items-center justify-between pb-4 border-b border-gray-700">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-amber-300 tracking-wider mb-2 sm:mb-0">Climate Outlook</h1>
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.79l.707-.707M6.707 17.325l-.707.707M16.949 7.05l.707-.707M7.05 16.949l-.707.707M12 10a2 2 0 100 4 2 2 0 000-4z"></path></svg>
        <span class="text-sm text-gray-500">Last Updated: 12:30 PM, Oct 26</span>
      </div>
    </div>

    <!-- Main Weather Card -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
          <img src="https://picsum.photos/id/1041/100/100" alt="Cloudy Sky" class="w-24 h-24 rounded-full mr-4 object-cover border-2 border-amber-400" />
          <div>
            <p class="text-6xl font-bold text-amber-200">22°C</p>
            <p class="text-xl text-gray-300">Partly Cloudy</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-3xl font-semibold text-gray-200 mb-1">New York</p>
          <p class="text-lg text-gray-400">Humidity: 65%</p>
          <p class="text-lg text-gray-400">Wind: 15 km/h E</p>
        </div>
      </div>
    </div>

    <!-- Forecast Cards (Grid) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <!-- Day 1 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p- Dudley. The text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tomorrow</p>
        <img src="https://picsum.photos/id/972/80/80" alt="Rainy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">18°C</p>
        <p class="text-md text-gray-400">Rainy</p>
      </div>

      <!-- Day 2 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Sun</p>
        <img src="https://picsum.photos/id/1020/80/80" alt="Sunny Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">25°C</p>
        <p class="text-md text-gray-400">Sunny</p>
      </div>

      <!-- Day 3 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Mon</p>
        <img src="https://picsum.photos/id/1024/80/80" alt="Cloudy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">20°C</p>
        <p class="text-md text-gray-400">Cloudy</p>
      </div>

      <!-- Day 4 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tue</p>
        <img src="https://picsum.photos/id/1077/80/80" alt="Windy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">19°C</p>
        <p class="text-md text-gray-400">Windy</p>
      </div>

    </div>

    <!-- Climate Trend Chart Placeholder -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <h2 class="text-xl font-semibold text-gray-200 mb-4">Temperature Trend (Last 7 Days)</h2>
      <div class="w-full h-48 bg-gray-700 rounded-md flex items-center justify-center">
        <p class="text-gray-500 text-lg">Graph Placeholder</p>
      </div>
    </div>

    <!-- Additional Data Points / Footer -->
    <div class="flex flex-col sm:flex-row items-center justify-between text-gray-500 pt-4 border-t border-gray-700">
      <p class="text-sm mb-2 sm:mb-0">© 2023 Retro Climate Inc.</p>
      <div class="flex space-x-4 text-sm">
        <a href="#" class="hover:text-gray-400">Privacy</a>
        <a href="#" class="hover:text-gray-400">Terms</a>
        <a href="#" class="hover:text-gray-400">Contact</a>
      </div>
    </div>

  </div>
</div>

Social Share Buttons Component

A playful and fun social share button component designed for gaming websites, featuring a gradient rainbow color scheme, rounded elements, and interactive hover effects. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 max-w-full mx-auto transform transition-all duration-300 hover:scale-[1.01] border-4 border-white dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Background Sparkle Effect -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-50 transition-opacity duration-500">
      <div class="absolute w-12 h-12 bg-purple-400 rounded-full blur-xl top-4 left-4 animate-pulse-slow"></div>
      <div class="absolute w-16 h-16 bg-pink-400 rounded-full blur-xl bottom-8 right-8 animate-pulse-slow animation-delay-2000"></div>
      <div class="absolute w-10 h-10 bg-yellow-400 rounded-full blur-xl top-1/2 left-1/4 animate-pulse-slow animation-delay-4000"></div>
    </div>
    
    <div class="relative z-10 text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-4 sm:mb-6 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-500 dark:from-purple-400 dark:via-pink-400 dark:to-yellow-400 drop-shadow-md">
        Share the Epic Win!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto">
        Spread the word about your legendary gaming moments and invite friends to join the fun.
      </p>

      <div class="flex flex-wrap justify-center gap-4 sm:gap-6">

        <!-- Twitter Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700
          dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600
          relative overflow-hidden z-10"
          aria-label="Share on Twitter">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.25c8.53 0 13.2-7.07 13.2-13.2v-.6c.91-.66 1.7-.68 2.33-1.07-.85.38-1.74.65-2.67.76.98-.59 1.74-1.5 2.1-2.61-.92.55-1.94.95-3.02 1.17C18.66 2.74 17.5 2 16.22 2c-2.4 0-4.35 1.95-4.35 4.35 0 .34.04.67.11.99C7.45 6.64 3.9 4.7 1.5 1.5c-.37.63-.58 1.34-.58 2.13 0 1.5 1.1 2.76 2.5 3.32-.96-.03-1.87-.29-2.66-.7v.05c0 2.11 1.5 3.87 3.5 4.28-.36.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.56 1.75 2.17 3.03 4.09 3.06-1.57 1.23-3.56 1.95-5.72 1.95-.37 0-.74-.02-1.1-.06C2.9 19.3 5.06 20.25 8.29 20.25z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Facebook Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-indigo-500 to-indigo-700 hover:from-indigo-600 hover:to-indigo-800
          dark:from-indigo-700 dark:to-indigo-900 dark:hover:from-indigo-600 dark:hover:to-indigo-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-600
          relative overflow-hidden z-10"
          aria-label="Share on Facebook">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Discord Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800
          dark:from-purple-700 dark:to-purple-900 dark:hover:from-purple-600 dark:hover:to-purple-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600
          relative overflow-hidden z-10"
          aria-label="Share on Discord">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.25 6.475C19.782 5.093 18.91 3.882 17.75 2.946c-.053-.042-.11-.08-.168-.11ZM3.743 6.475C4.21 5.093 5.083 3.882 6.242 2.946c.057-.042.115-.08.172-.11ZM12 0c-1.895 0-3.77.363-5.594 1.107C4.697 2.193 3.036 3.633 1.83 5.28c-1.205 1.647-1.92 3.513-2.072 5.42C-.32 12.63.15 14.542.929 16.326c.78 1.784 1.936 3.376 3.393 4.673 1.458 1.3 3.167 2.25 5.05 2.894 1.884.644 3.844.821 5.792.518 1.947-.303 3.805-.98 5.437-2 1.632-1.02 2.993-2.404 3.99-4.01C23.85 14.28 24.32 12.37 24 10.42c-.152-1.907-.866-3.773-2.072-5.42C20.728 3.633 19.068 2.193 17.402 1.107 15.576.363 13.7.001 11.805 0zm-2.003 14.735c-.947 0-1.74-.752-1.74-1.68 0-.928.793-1.68 1.74-1.68.95 0 1.74.752 1.74 1.68 0 .927-.79 1.68-1.74 1.68zm7.006 0c-.947 0-1.74-.752-1.74-1.68 0-.928.794-1.68 1.74-1.68.948 0 1.737.752 1.737 1.68 0 .927-.789 1.68-1.737 1.68zm-.136-5.093c-.93-.414-2.8-.756-4.87-.756-2.07 0-3.94 1.89-4.87.756-.36-.16-.388-.307-.15-.46 2.45-1.57 4.09-.94 4.09-.94l.112.062s2.61.69 4.31-.065c.238-.153.21-.005-.15.46z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Reddit Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700
          dark:from-orange-600 dark:to-orange-800 dark:hover:from-orange-500 dark:hover:to-orange-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600
          relative overflow-hidden z-10"
          aria-label="Share on Reddit">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C6.47 0 2 4.58 2 10.22c0 2.21.73 4.25 1.96 5.86.08.11.12.26.12.42v5.02c0 .48.37.87.84.87h1.02c.08 0 .15-.02.21-.05.5-.23 1.05-.59 1.64-.92.29-.16.6-.28.93-.34 1.1-.2 2.29-.3 3.52-.3 1.23 0 2.42.1 3.52.3.32.06.64.18.93.34.59.33 1.14.69 1.64.92.07.03.14.05.21.05h1.02c.47 0 .84-.39.84-.87v-5.02c0-.16.04-.31.12-.42C21.27 14.47 22 12.43 22 10.22 22 4.58 17.53 0 12 0zm5.22 15.65c-.24.13-1.07.39-2.02.39-1.01 0-1.9-.3-2.8-.81-.22-.1-.4-.08-.57.06-.11.08-.2.18-.28.3-.08.1-.15.2-.2.3-.02.04-.04.09-.06.14-.07.13-.09.28-.06.41.03.1.09.18.17.25.13.11.3.17.47.17h.1c.14 0 .27-.05.37-.14l.02-.02c.11-.1.2-.21.28-.34.19-.3.12-.66-.19-.77-.38-.13-.77-.18-1.25-.18-.34 0-.68.04-1.0.12-.13.03-.27.06-.4.06-.03 0-.06-.01-.09-.02-.15-.04-.2-.2-.14-.3.04-.08.1-.16.18-.22.09-.07.19-.13.3-.18.1-.05.21-.08.32-.1.14-.02.2-.1.15-.22-.02-.04-.04-.08-.07-.12-.05-.09-.12-.16-.19-.22-.09-.08-.2-.13-.3-.16-.08-.02-.16-.03-.24-.03-.11 0-.2.03-.27.08s-.13.11-.15.19c-.06.16-.06.33 0 .49.03.09.08.17.15.23.08.07.17.12.27.16.12.04.25.07.38.07.13 0 .25-.03.37-.08.12-.06.22-.14.3-.23.1-.11.16-.2.16-.3l.01-.02c0-.03 0-.05-.02-.08-.02-.02-.04-.04-.07-.05-.05-.02-.12-.02-.19 0-.08.02-.16.06-.23.11-.08.05-.15.11-.22.17-.06.07-.12.15-.17.24-.03.05-.05.1-.06.15-.02.05-.03.1-.03.16 0 .09.03.17.08.23.05.06.11.1.18.12.07.02.14.03.22.03.1 0 .2-.02.29-.05.09-.03.17-.07.24-.12.08-.05.14-.1.19-.17.06-.06.1-.13.13-.2.03-.07.04-.14.04-.21 0-.1-.03-.19-.07-.27-.05-.08-.11-.15-.19-.21-.09-.07-.19-.12-.3-.16-.11-.04-.23-.06-.35-.06-.2 0-.39.04-.57.1-.18.06-.34.14-.49.25-.15.1-.28.22-.39.36-.11.14-.19.29-.25.46-.06.16-.08.34-.05.51.03.17.11.33.22.46.11.14.25.26.4.35.15.09.31.16.48.2.17.04.35.06.5.06.21 0 .41-.03.6-.08.19-.05.37-.12.54-.2.17-.09.32-.19.46-.3.14-.1.26-.23.36-.36.03-.04.05-.08.07-.12.03-.05.04-.1.04-.16 0-.08-.02-.15-.06-.22-.04-.07-.09-.13-.15-.17-.06-.05-.13-.08-.2-.1-.07-.02-.15-.02-.23 0-.08.02-.15.05-.21.09-.06.04-.11.08-.16.13-.04.05-.07.09-.08.14-.02.04-.03.09-.03.14 0 .07.02.13.06.18.04.05.09.08.15.1.06.02.12.02.19 0zm1.78-4.22c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29zM8.32 10.14c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

      </div>

      <p class="text-sm text-gray-500 dark:text-gray-400 mt-8">
        Game on! &copy; 2023
      </p>

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

<style>
  /* Custom animations for the playful background sparks */
  @keyframes pulse-slow {
    0% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
    25% { transform: scale(1.1) translateY(-5px) rotate(10deg); opacity: 0.4; }
    50% { transform: scale(1) translateY(0px) rotate(0deg); opacity: 0.2; }
    75% { transform: scale(0.9) translateY(5px) rotate(-10deg); opacity: 0.3; }
    100% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
  }

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

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Retro_Jewel_Tone_Dashboard_Footer_Navigation

A responsive footer navigation component for a dashboard, inspired by retro/vintage aesthetics with jewel tone colors (emerald, sapphire, ruby) and dark mode support. It includes navigation links, social media icons, and copyright information.

Open Preview

                <footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
    
    <div class="col-span-1">
      <h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
      <p class="text-emerald-100 text-sm leading-relaxed mb-4">
        Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <nav class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
      </ul>
    </nav>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
      </ul>
    </div>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
      <address class="not-italic text-emerald-100 text-sm space-y-2">
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
      </address>
    </div>

  </div>
  
  <div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
    <p>&copy; 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
  </div>
</footer>

Filters Component

A complex, responsive filters component for a dashboard, featuring a clean, minimalist design with a neon/electric color scheme, supporting multiple interactive elements and dark mode. Designed for data visualization and control panels.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-lime-400 dark:text-lime-500 tracking-tight">Dashboard Filters</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Search Input -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 relative">
        <label for="search" class="block text-sm font-medium text-blue-600 dark:text-blue-400 mb-2">Search Anything</label>
        <input type="text" id="search" placeholder="Type here to search..." class="w-full px-4 py-3 border border-blue-500 dark:border-blue-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pt-8 pointer-events-none">
          <svg class="h-5 w-5 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <!-- Date Range Picker -->
      <div class="col-span-full lg:col-span-2 xl:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label for="startDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">Start Date</label>
          <input type="date" id="startDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
        <div>
          <label for="endDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">End Date</label>
          <input type="date" id="endDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
      </div>

      <!-- Dropdown Filter 1 -->
      <div>
        <label for="categoryFilter" class="block text-sm font-medium text-lime-600 dark:text-lime-400 mb-2">Category</label>
        <div class="relative">
          <select id="categoryFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-lime-500 dark:border-lime-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-lime-400 dark:focus:ring-lime-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Categories</option>
            <option value="finance">Finance</option>
            <option value="marketing">Marketing</option>
            <option value="operations">Operations</option>
            <option value="hr">HR</option>
            <option value="sales">Sales</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-lime-700 dark:text-lime-500">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Dropdown Filter 2 -->
      <div>
        <label for="statusFilter" class="block text-sm font-medium text-purple-600 dark:text-purple-400 mb-2">Status</label>
        <div class="relative">
          <select id="statusFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-purple-500 dark:border-purple-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Statuses</option>
            <option value="active">Active</option>
            <option value="pending">Pending</option>
            <option value="completed">Completed</option>
            <option value="cancelled">Cancelled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-purple-700 dark:text-purple-500">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Slider Filter (Range) -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2">
        <label for="rangeFilter" class="block text-sm font-medium text-cyan-600 dark:text-cyan-400 mb-2">Value Range <span id="rangeValue" class="font-bold">$100 - $500</span></label>
        <input type="range" id="rangeFilter" min="0" max="1000" value="300" step="100" class="w-full h-2 bg-gradient-to-r from-teal-400 to-cyan-500 dark:from-teal-600 dark:to-cyan-700 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:focus:ring-cyan-500 transition-colors duration-300">
      </div>

      <!-- Checkbox Group -->
      <fieldset class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-orange-500 dark:border-orange-600 transition-colors duration-300">
        <legend class="text-sm font-medium text-orange-600 dark:text-orange-400 mb-3">Options</legend>
        <div class="grid grid-cols-2 gap-y-2 sm:gap-x-4">
          <div class="flex items-center">
            <input id="option1" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option1" class="ml-2 text-gray-800 dark:text-gray-200">Critical Only</label>
          </div>
          <div class="flex items-center">
            <input id="option2" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option2" class="ml-2 text-gray-800 dark:text-gray-200">Hide Completed</label>
          </div>
          <div class="flex items-center">
            <input id="option3" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option3" class="ml-2 text-gray-800 dark:text-gray-200">Show Drafts</label>
          </div>
          <div class="flex items-center">
            <input id="option4" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option4" class="ml-2 text-gray-800 dark:text-gray-200">Archive Inclusive</label>
          </div>
        </div>
      </fieldset>

      <!-- Apply and Reset Buttons -->
      <div class="col-span-full flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 shadow-md transition-all duration-300 transform hover:scale-105">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Apply Filters
          </span>
        </button>
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 shadow-md transition-all duration-300 transform hover:scale-105 border border-gray-400 dark:border-gray-600">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.08V12m-8.982 8l9-9 9 9M7 12l-2-2m0 0L3 6m2 2l4-4" />
            </svg>
            Reset
          </span>
        </button>
      </div>

    </div>
  </div>

  <script>
    // JavaScript for range slider value display (optional, but good for UX)
    document.addEventListener('DOMContentLoaded', function() {
      const rangeFilter = document.getElementById('rangeFilter');
      const rangeValue = document.getElementById('rangeValue');

      if (rangeFilter && rangeValue) {
        rangeFilter.addEventListener('input', function() {
          const value = parseInt(this.value);
          rangeValue.textContent = `$${value} - $${value + 400}`;
        });

        // Set initial value
        const initialValue = parseInt(rangeFilter.value);
        rangeValue.textContent = `$${initialValue} - $${initialValue + 400}`;
      }
    });
  </script>
</div>

Cyberpunk Agricultural Image Lightbox

A complex, responsive image lightbox component with cyberpunk aesthetics, featuring a purple/violet color scheme, designed for agricultural and farming websites. It supports dark mode and displays images with titles, descriptions, and basic metadata.

Open Preview

                <div class="min-h-screen bg-neutral-950 dark:bg-black text-violet-200 p-4 font-mono antialiased">

  <!-- Grid of thumbnail images -->
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-600 drop-shadow-md">Neural Crop Database // Image Log</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-10">
    <!-- Image Thumbnail 1 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/100/1280/720', 'Hydroponic Greens Farm', 'Automated vertical farm cultivating a variety of leafy greens in a controlled environment.', 'Harvest Date: 2077-10-23', 'Sensor Readings: Optimal', 'Operator: Unit 734-Alpha')">
      <img src="https://picsum.photos/id/100/300/200" alt="Hydroponic Greens" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Hydroponic Greens</p>
      </div>
    </div>
    <!-- Image Thumbnail 2 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/101/1280/720', 'Automated Drone Irrigation', 'Precision irrigation drones deployed over a vast bio-engineered wheat field.', 'Last Flight: 2077-10-22', 'Fuel Cell: 98%', 'Unit ID: Drone-004')">
      <img src="https://picsum.photos/id/101/300/200" alt="Automated Drone Irrigation" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Drone Irrigation</p>
      </div>
    </div>
    <!-- Image Thumbnail 3 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/102/1280/720', 'Subterranean Myco-Farm', 'Advanced fungal cultivation in a controlled subterranean environment.', 'Harvest Cycle: Weekly', 'Humidity: 95%', 'Strain: Myco-Synth 001')">
      <img src="https://picsum.photos/id/102/300/200" alt="Subterranean Myco-Farm" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Myco-Farm</p>
      </div>
    </div>
     <!-- Image Thumbnail 4 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/103/1280/720', 'Bioluminescent Algae Tanks', 'Energy-efficient algae bioreactors producing biofuel and agricultural supplements.', 'Biomass Output: High', 'Temp: 28°C', 'Project: Bio-Fuel Nexus')">
      <img src="https://picsum.photos/id/103/300/200" alt="Bioluminescent Algae Tanks" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Algae Tanks</p>
      </div>
    </div>
    <!-- Image Thumbnail 5 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/104/1280/720', 'Urban Vertical Garden', 'Compact automated vertical farm integrated into an urban skyscraper.', 'Crops: Mixed Greens', 'Water Usage: Minimal', 'Location: Sector 7, Rooftop A')">
      <img src="https://picsum.photos/id/104/300/200" alt="Urban Vertical Garden" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Urban Garden</p>
      </div>
    </div>
  </div>

  <!-- The Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 z-50 hidden bg-neutral-950/70 dark:bg-black/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 opacity-0">
    <div class="relative w-full max-w-5xl bg-neutral-900 dark:bg-neutral-800 rounded-lg shadow-2xl border border-purple-800 dark:border-fuchsia-900 transform transition-all duration-300 scale-95">
      <!-- Close button -->
      <button class="absolute top-3 right-3 text-violet-300 hover:text-fuchsia-400 text-3xl font-bold leading-none z-10 transition-colors duration-200" onclick="closeLightbox()">
        &times;
      </button>

      <div class="flex flex-col lg:flex-row">
        <!-- Lightbox Image -->
        <div class="flex-shrink-0 lg:w-2/3 p-4">
          <img id="lightbox-image" src="" alt="" class="w-full h-auto object-contain rounded-md border border-purple-700 dark:border-fuchsia-800">
        </div>

        <!-- Image Details -->
        <div class="lg:w-1/3 p-4 flex flex-col justify-between overflow-y-auto max-h-[80vh]">
          <div>
            <h3 id="lightbox-title" class="text-xl md:text-2xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-500 drop-shadow-sm"></h3>
            <p id="lightbox-description" class="text-sm md:text-base text-violet-300 mb-4"></p>

            <div class="space-y-1 text-xs md:text-sm text-violet-400/80">
              <p><strong class="text-purple-300">// Date:</strong> <span id="lightbox-meta1"></span></p>
              <p><strong class="text-purple-300">// Status:</strong> <span id="lightbox-meta2"></span></p>
              <p><strong class="text-purple-300">// Ref_ID:</strong> <span id="lightbox-meta3"></span></p>
            </div>
          </div>

          <!-- Action Buttons / Other Info -->
          <div class="mt-6 pt-4 border-t border-purple-800/50">
            <button class="w-full bg-gradient-to-r from-purple-700 to-fuchsia-700 hover:from-purple-600 hover:to-fuchsia-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300 drop-shadow-lg text-sm md:text-base">
              Download Log Data <span class="ml-1">&gt;</span>
            </button>
            <p class="text-xs text-violet-500 mt-2 text-center">Secure Protocol v3.1_AX</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Simple toggle for dark mode (for demonstration) -->
  <div class="fixed bottom-4 left-4 p-2 bg-neutral-800/70 border border-purple-800 rounded-lg shadow-lg flex items-center space-x-2">
    <label for="dark-mode-toggle" class="text-violet-300 text-xs md:text-sm">Dark Mode</label>
    <input type="checkbox" id="dark-mode-toggle" class="w-4 h-4 text-fuchsia-500 bg-neutral-700 border-purple-600 rounded focus:ring-fuchsia-500" onclick="document.documentElement.classList.toggle('dark')">
  </div>

  <script>
    function openLightbox(imageUrl, title, description, meta1, meta2, meta3) {
      const lightbox = document.getElementById('lightbox-modal');
      document.getElementById('lightbox-image').src = imageUrl;
      document.getElementById('lightbox-title').textContent = title;
      document.getElementById('lightbox-description').textContent = description;
      document.getElementById('lightbox-meta1').textContent = meta1;
      document.getElementById('lightbox-meta2').textContent = meta2;
      document.getElementById('lightbox-meta3').textContent = meta3;
      lightbox.classList.remove('hidden', 'opacity-0');
      lightbox.classList.add('flex');
      setTimeout(() => {
        lightbox.classList.remove('opacity-0');
        document.querySelector('#lightbox-modal > div').classList.remove('scale-95');
        document.querySelector('#lightbox-modal > div').classList.add('scale-100');
      }, 50);
    }

    function closeLightbox() {
      const lightbox = document.getElementById('lightbox-modal');
       document.querySelector('#lightbox-modal > div').classList.remove('scale-100');
       document.querySelector('#lightbox-modal > div').classList.add('scale-95');
      lightbox.classList.add('opacity-0');
      setTimeout(() => {
        lightbox.classList.remove('flex');
        lightbox.classList.add('hidden');
      }, 300);
    }

    // Close lightbox on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        closeLightbox();
      }
    });

    // Close lightbox when clicking outside the content
    document.getElementById('lightbox-modal').addEventListener('click', (e) => {
      if (e.target.id === 'lightbox-modal') {
        closeLightbox();
      }
    });
  </script>
</div>

Agriculture News Card Navigation

A simple, paper/print-inspired navigation component featuring a news card for agriculture and farming websites, using an analogous color scheme. It's fully responsive with dark mode support.

Open Preview

                <nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('menu-button');
      const menu = document.getElementById('menu');

      menuButton.addEventListener('click', function() {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</nav>

1 ... 99 100 101 102 103 ... 335