Search Components

CAPTCHA

Challenge-response test to determine human users

Bauhaus CAPTCHA Component

A simple, functional CAPTCHA component in Bauhaus style for documentation/wiki sites, featuring geometric forms, high contrast, full responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg border-2 border-black dark:border-white relative overflow-hidden">
    
    <!-- Bauhaus geometric elements -->
    <div class="absolute top-0 left-0 w-16 h-16 bg-red-500 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-blue-500 transform translate-x-1/2 translate-y-1/2 -rotate-30"></div>
    <div class="absolute top-1/2 left-1/2 w-12 h-12 bg-yellow-500 z-0 transform -translate-x-1/2 -translate-y-1/2 rotate-12"></div>

    <div class="relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold mb-4 text-center dark:text-white uppercase tracking-wider">
        Are you Human?
      </h2>
      
      <p class="mb-6 text-sm text-center text-gray-700 dark:text-gray-300">
        Please click the square containing a &quot;Circle&quot;.
      </p>

      <div class="grid grid-cols-3 gap-2 mb-6">
        <!-- Example CAPTCHA grid items -->
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white transform rotate-45 group-hover:rotate-0 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 dark:ring-blue-400 group-hover:scale-110 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-2 md:w-10 md:h-2 bg-red-500 ring-2 ring-red-500 dark:ring-red-400 group-hover:w-full transition-all duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-6 h-6 md:w-8 md:h-8 border-4 border-yellow-500 dark:border-yellow-400 rounded-lg group-hover:rotate-180 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white clip-path-polygon-[50%_0%,_0%_100%,_100%_100%] group-hover:scale-105 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 border-4 border-red-500 dark:border-red-400 rounded-full group-hover:animate-spin-slow"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 relative">
            <div class="absolute inset-0 bg-yellow-500 dark:bg-yellow-400 group-hover:rotate-45 transition-transform duration-200"></div>
            <div class="absolute inset-0 bg-blue-500 dark:bg-blue-400 group-hover:-rotate-45 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-4 border-black dark:border-white relative">
            <div class="absolute w-2 h-2 rounded-full bg-black dark:bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-yellow-500 dark:bg-yellow-400 group-hover:scale-105 transition-transform duration-200"></div>
        </button>
      </div>

      <div class="flex justify-between items-center">
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Refresh
        </button>
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-blue-500 text-white dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component - Candy Material Design

A simple, responsive CAPTCHA component with a candy-themed Material Design aesthetic, suitable for event and conference websites. Includes dark mode support.

Open Preview

                <div class="p-4 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:shadow-2xl dark:shadow-md">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400">I'm not a robot</h2>
        <div class="w-12 h-12 flex items-center justify-center bg-gradient-to-br from-pink-400 to-purple-500 rounded-full shadow-lg">
          <svg class="w-8 h-8 text-white" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row items-center gap-4">
        <div class="flex-shrink-0">
          <button type="button" class="w-24 h-24 sm:w-28 sm:h-28 bg-white dark:bg-gray-700 border-4 border-pink-300 dark:border-pink-500 rounded-lg shadow-inner flex items-center justify-center focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-600 transition duration-200 ease-in-out transform active:scale-95">
            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-mint-green-300 dark:bg-mint-green-500 rounded-md shadow-md"></div>
          </button>
        </div>
        <div class="flex-grow text-gray-700 dark:text-gray-300">
          <p class="text-sm text-center sm:text-left">Please click the checkbox to confirm you are not a robot.</p>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center sm:text-left">This helps protect our event from spam and abuse.</p>
        </div>
      </div>

      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
        <a href="#" class="text-xs text-mint-green-600 dark:text-mint-green-400 hover:underline transition duration-200">
          Privacy & Terms
        </a>
      </div>
    </div>
  </div>
  <style>
    /* Custom 'Mint Green' color for demonstration, you can extend your tailwind.config.js */
    .bg-mint-green-300 {
      background-color: #A7F0C7; /* A lighter, cheerful mint */
    }
    .dark\:bg-mint-green-500 {
      background-color: #6EE7B7; /* A slightly darker mint for dark mode */
    }
    .text-mint-green-600 {
      color: #059669; /* A vivid mint green */
    }
    .dark\:text-mint-green-400 {
      color: #34D399; /* A brighter mint green for dark mode */
    }
  </style>
</div>

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>

Minimalist Captcha Component

A simple, responsive, and minimalist CAPTCHA component designed for dashboards, using a monochromatic color scheme and supporting dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-md bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6">
      Are you human?
    </h2>

    <div class="flex flex-col items-center gap-4 mb-6">
      <div class="w-full h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
        <img src="https://picsum.photos/250/80?random=1" alt="Captcha image" class="w-full h-full object-cover rounded-sm border border-gray-300 dark:border-gray-600">
      </div>
      <button type="button" class="flex items-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md py-1 px-2">
        <svg class="w-4 h-4 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 11m7 11v-5h.582m-15.356-2A8.001 8.001 0 0120 13l-2.199-1.857L20 13c-.161 4.545-3.535 8-7.794 8A7.962 7.962 0 014 12.01

Skeuomorphic CAPTCHA Component

A moderately complex, skeuomorphic CAPTCHA component designed with corporate blue tones, suitable for booking and reservation systems. Features responsive design and dark mode support, mimicking real-world digital elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t border-l border-blue-50 dark:border-gray-600 p-6 sm:p-8 relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-200/50 before:to-blue-400/50 dark:before:from-gray-800/50 dark:before:to-gray-950/50 before:rounded-2xl before:blur-xl before:opacity-30 before:-z-10
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] after:from-blue-100/30 after:via-blue-50/10 after:to-transparent dark:after:from-gray-600/30 dark:after:via-gray-700/10 dark:after:to-transparent after:rounded-2xl after:-z-10">

    <div class="flex items-center space-x-3 mb-6">
      <svg class="h-8 w-8 text-blue-700 dark:text-blue-400 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.92c-.225.86.147 1.767.93 2.22a12.035 12.035 0 0010.51 3.251c.905-.182 1.706-.577 2.404-1.127a12.003 12.003 0 003.53-3.66c.383-.75.393-1.637.087-2.399A12.008 12.008 0 0021.08 6.92a12.01 12.01 0 00-.73-2.936z" />
      </svg>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-900 dark:text-gray-100 text-shadow-sm">Verify You're Human</h2>
    </div>

    <p class="text-blue-800 dark:text-gray-200 mb-6 leading-relaxed">
      To proceed with your booking, please complete the CAPTCHA challenge below.
    </p>

    <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-xl shadow-inner border border-blue-200 dark:border-gray-700 mb-6">
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2 text-blue-700 dark:text-blue-300 font-semibold mb-3 border-b border-blue-200/50 dark:border-gray-600/50 pb-2 flex items-center">
           <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2zM9 22V12h6v10" />
            </svg>
          Select all squares containing a <span class="text-blue-900 dark:text-white font-bold ml-1">house</span>.
        </div>

        <div class="captcha-grid grid grid-cols-3 gap-2">
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/10/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/433/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/292/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/400/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/296/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1025/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/29/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1074/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/196/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex items-center justify-center w-full sm:w-auto px-6 py-3 bg-blue-700 text-white rounded-xl shadow-md hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out
        relative overflow-hidden group
        after:absolute after:top-0 after:left-0 after:w-0 after:h-full after:bg-white/20 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full">
        <svg class="h-5 w-5 mr-2 -ml-1 text-white group-hover:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span class="relative z-10">Refresh</span>
      </button>
      <button type="submit" class="flex items-center justify-center w-full sm:w-auto px-8 py-3 bg-gradient-to-br from-blue-600 to-blue-800 text-white font-bold rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 dark:from-blue-500 dark:to-blue-700 dark:hover:from-blue-600 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out
        relative overflow-hidden group
        before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-white/20 before:transition-all before:duration-300 before:ease-in-out group-hover:before:w-full">
        <span class="relative z-10">Verify</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-white group-hover:text-blue-50 z-10" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <p class="text-xs text-blue-600 dark:text-gray-400 mt-6 text-center">
      Your privacy matters. This helps us ensure a secure experience for all users.
    </p>

  </div>
</div>

CAPTCHA Component - Watercolor/Artistic

A simple, responsive CAPTCHA component with a watercolor/artistic design, high contrast color scheme, and dark mode support, suitable for manufacturing/industrial applications.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden relative border border-solid border-gray-300 dark:border-gray-700
              bg-gradient-to-br from-blue-50 dark:from-blue-950 to-purple-50 dark:to-purple-950
              transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Artistic Background Elements (simulated with layered divs and subtle effects) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full mix-blend-multiply filter blur-lg opacity-60"></div>
    </div>

    <div class="relative z-10 p-8">
      <h2 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4 text-center tracking-tight leading-tight"
          style="font-family: 'Times New Roman', serif;">Security Check</h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">
        To proceed, please verify you are human.
      </p>

      <div class="flex flex-col items-center mb-6">
        <!-- CAPTCHA Image Placeholder -->
        <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden border border-purple-400 dark:border-purple-600 shadow-md mb-4 flex items-center justify-center relative">
          <img src="https://picsum.photos/300/150?blur=5&random=1" alt="CAPTCHA Challenge" class="absolute inset-0 w-full h-full object-cover filter brightness-75 dark:brightness-50 opacity-80">
          <span class="relative z-10 text-3xl font-bold italic text-white dark:text-gray-200 tracking-wider select-none transform -rotate-3 blur-[0.7px]">
            A0bK9x
          </span>
        </div>

        <button class="flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7 0 0116 0V3a1 1 0 112 0v2.101a7.002 7 0 01-16 0V3a1 1 0 011-1zm6 4a4 4 0 100 8a4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
          </svg>
          Get a new challenge
        </button>
      </div>

      <form>
        <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Enter the characters</label>
        <input type="text" id="captcha-input" placeholder="Enter the characters above" class="w-full px-4 py-2 mb-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-2 border-purple-500 dark:border-purple-400 rounded-md shadow-sm
                focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent
                placeholder-gray-400 dark:placeholder-gray-500 transition duration-200 ease-in-out text-center tracking-wider font-semibold">

        <button type="submit" class="w-full py-2 px-4 rounded-md text-lg font-bold text-white shadow-lg
                bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 ease-in-out
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900
                transform hover:scale-[1.02]">Verify</button>
      </form>
    </div>
  </div>
</div>

Monospace_Developer_CAPTCHA_Component

A complex, code-inspired CAPTCHA component with a monospace font, terminal aesthetics, and a complementary color scheme, designed for a portfolio to showcase work. Fully responsive with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-2 border-green-500 dark:border-purple-500 transform transition-all duration-300 hover:scale-105">
    <div class="bg-green-600 dark:bg-purple-600 p-3 flex items-center justify-between">
      <div class="flex space-x-2">
        <span class="p-1.5 rounded-full bg-red-500"></span>
        <span class="p-1.5 rounded-full bg-yellow-500"></span>
        <span class="p-1.5 rounded-full bg-green-500"></span>
      </div>
      <p class="text-white opacity-90 text-sm">$ interactive_captcha.sh</p>
      <button aria-label="Minimize window" class="text-white text-lg leading-none align-middle transform rotate-45 hover:text-gray-300 transition-colors duration-200">+</button>
    </div>
    <div class="p-6 space-y-6 text-gray-800 dark:text-gray-200">
      <p class="text-lg font-bold text-green-700 dark:text-purple-400">// SYSTEM_INIT: Verifying Human Identity...</p>
      <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-md border border-gray-700 dark:border-gray-600 shadow-inner flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 items-center justify-between">
        <div class="flex-shrink-0 w-32 h-24 bg-gray-900 dark:bg-gray-800 rounded-sm overflow-hidden border border-gray-600 dark:border-gray-500 flex items-center justify-center">
          <img src="https://picsum.photos/seed/captcha1/128/96" alt="CAPTCHA image" class="w-full h-full object-cover grayscale opacity-80">
        </div>
        <div class="flex-grow text-sm text-gray-200 dark:text-gray-300">
          <p class="mb-2">&gt; Type the characters you see in the image:</p>
          <div class="flex space-x-2">
            <span class="px-2 py-1 bg-green-500 text-gray-900 rounded inline-block transform -rotate-6 text-lg font-extrabold shadow-md">A</span>
            <span class="px-2 py-1 bg-yellow-500 text-gray-900 rounded inline-block transform rotate-3 text-lg font-extrabold shadow-md">b</span>
            <span class="px-2 py-1 bg-blue-500 text-gray-900 rounded inline-block transform -rotate-2 text-lg font-extrabold shadow-md">C</span>
            <span class="px-2 py-1 bg-red-500 text-gray-900 rounded inline-block transform rotate-5 text-lg font-extrabold shadow-md">1</span>
            <span class="px-2 py-1 bg-purple-500 text-gray-900 rounded inline-block transform -rotate-4 text-lg font-extrabold shadow-md">2</span>
          </div>
        </div>
      </div>
      <div class="space-y-4">
        <label for="captcha-input" class="block text-sm font-semibold text-green-600 dark:text-purple-400">$USER_INPUT:</label>
        <input type="text" id="captcha-input" placeholder="&gt; your_response_here" class="w-full p-3 rounded-md bg-gray-900 dark:bg-gray-700 text-green-300 dark:text-purple-300 border border-green-700 dark:border-purple-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500 font-mono text-base shadow-sm leading-relaxed caret-green-500 dark:caret-purple-500">
        <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
          <button class="flex-1 py-3 px-6 bg-green-600 hover:bg-green-700 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.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="M5 13l4 4L19 7"></path></svg>
            VERIFY <span class="hidden sm:inline">[ACCEPT]</span>
          </button>
          <button class="flex-1 py-3 px-6 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.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 13v-1m6.7-6.7L7 7m0 0l-3.72 3.72M7 7V4"></path></svg>
            RELOAD <span class="hidden sm:inline">[TRY_AGAIN]</span>
          </button>
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">// STATUS: Awaiting input from user...</p>
    </div>
    <div class="bg-gray-800 dark:bg-gray-700 p-3 pt-2 text-xs text-gray-400 dark:text-gray-500 flex justify-between items-center">
      <p>@ 2023 INTERACTIVE_DEV.SYS</p>
      <a href="#" class="text-green-500 dark:text-purple-400 hover:underline">help.md</a>
    </div>
  </div>
</div>

CAPTCHA Component

A Material Design inspired CAPTCHA component with a vibrant color scheme, designed for social media applications. Fully responsive with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans tracking-wide">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl sm:p-5 p-4">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white capitalize">I'm not a robot</h2>
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-6">
      <img src="https://picsum.photos/id/237/100/100" alt="Image Grid 1" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/238/100/100" alt="Image Grid 2" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/239/100/100" alt="Image Grid 3" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/240/100/100" alt="Image Grid 4" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/241/100/100" alt="Image Grid 5" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/242/100/100" alt="Image Grid 6" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/243/100/100" alt="Image Grid 7" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/244/100/100" alt="Image Grid 8" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/245/100/100" alt="Image Grid 9" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
    </div>

    <p class="mb-6 text-gray-600 dark:text-gray-300 text-sm md:text-base">Please select all squares with <span class="font-semibold text-indigo-700 dark:text-indigo-400">vehicles</span>.</p>

    <div class="flex justify-end">
      <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Verify
      </button>
    </div>

    <div class="flex items-center justify-between text-xs mt-6 text-gray-500 dark:text-gray-400">
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Privacy</a>
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Terms</a>
    </div>
  </div>
</div>

CAPTCHA Component

A complex, responsive CAPTCHA component with a Swiss/International Typography design style and a vibrant color scheme, suitable for CRM/Business Tools. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6 md:p-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center sm:text-3xl lg:text-4xl">
      Security Check
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 text-center leading-relaxed mb-4">
      Please complete the security check to proceed.
    </p>

    <div class="space-y-4">
      <!-- CAPTCHA Display Area -->
      <div class="relative bg-gradient-to-r from-red-500 via-pink-500 to-purple-500 p-1 rounded-md shadow-inner">
        <div class="w-full h-24 sm:h-32 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <span class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-800 dark:text-blue-200 tracking-widest leading-none select-none italic transform -rotate-6">
            kL5pQRt9
          </span>
          <!-- Noise Overlay -->
          <div class="absolute inset-0 bg-gradient-to-br from-transparent to-black opacity-10 dark:opacity-20 pointer-events-none"></div>
          <div class="absolute inset-0 flex items-center justify-center p-2">
            <!-- Placeholder lines or distortions -->
            <div class="w-full h-px bg-yellow-400 absolute top-1/3 left-0 transform rotate-3"></div>
            <div class="w-full h-px bg-green-400 absolute bottom-1/4 right-0 transform -rotate-5"></div>
          </div>
        </div>
      </div>

      <!-- Input Field -->
      <div>
        <label for="captcha-input" class="sr-only">Enter CAPTCHA here</label>
        <input type="text" id="captcha-input" placeholder="Enter the text above" class="w-full p-3 sm:p-4 border border-blue-400 dark:border-blue-600 rounded-md focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 dark:focus:border-blue-700 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 outline-none text-base sm:text-lg tracking-wider transition-all duration-200 ease-in-out">
      </div>

      <!-- Action Buttons -->
      <div class="grid grid-cols-2 gap-3 sm:gap-4 md:flex md:justify-end md:space-x-4">
        <button type="button" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-medium rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005 7c-1.378 0-2.684.254-3.86-.713a1 1 0 010-1.419A1 1 0 012 4h-.002zm14 8a1 1 0 01-1 1v2.101a7.002 7.002 0 01-11.601 2.566 1 1 0 111.885.666A5.002 5.002 0 0015 13c1.378 0 2.684.254 3.86.713a1 1 0 010 1.419A1 1 0 0118 16h-.002z" clip-rule="evenodd" />
          </svg>
          Refresh
        </button>

        <button type="submit" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-semibold rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-gradient-to-r from-teal-500 to-emerald-600 text-white hover:from-teal-600 hover:to-emerald-700 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg">
          Verify
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <div class="pt-4 border-t border-gray-200 dark:border-gray-700 text-center">
      <p class="text-xs text-gray-500 dark:text-gray-400">
        Having trouble? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Contact support</a>
      </p>
    </div>
  </div>
</div>

RetroCaptchaComponent

A simple, retro-themed CAPTCHA component with a forest green color palette, designed for non-profit/charity websites. Features responsiveness and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-sm p-6 bg-lime-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-lime-600 dark:border-emerald-600 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
    <h2 class="text-2xl font-bold text-lime-900 dark:text-lime-200 mb-4 text-center tracking-wider uppercase drop-shadow-md">Are you human?</h2>
    <p class="text-sm text-lime-800 dark:text-lime-300 mb-6 text-center italic">Help us fight spam and protect our community.</p>

    <div class="flex flex-col items-center space-y-4">
      <div class="w-full bg-lime-200 dark:bg-gray-700 p-3 rounded-md border-2 border-lime-600 dark:border-emerald-600 relative overflow-hidden">
        <img src="https://picsum.photos/300/100?random=1" alt="CAPTCHA image" class="w-full h-24 object-cover rounded filter grayscale sepia brightness-90 contrast-120 blur-sm">
        <div class="absolute inset-0 bg-lime-300 dark:bg-gray-600 mix-blend-multiply opacity-75"></div>
        <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-lime-900 dark:text-emerald-900 font-extrabold tracking-widest uppercase rotate-3 select-none" style="text-shadow: 2px 2px 
#a3e635, 4px 4px #4D7C0F;">rUn34r</p>
        <button class="absolute top-2 right-2 text-lime-800 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-100 transition-colors duration-200" aria-label="Refresh CAPTCHA">
          <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 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.197-.736 4.22-1.99 5.864M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.197.736-4.22 1.99-5.864" />
          </svg>
        </button>
      </div>

      <input type="text" placeholder="Enter the text above" class="w-full px-4 py-2 text-lime-900 dark:text-lime-100 bg-lime-100 dark:bg-gray-700 border-2 border-lime-600 dark:border-emerald-600 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 placeholder-lime-700 dark:placeholder-lime-300 text-center tracking-wide font-bold uppercase" aria-label="CAPTCHA input field">

      <button class="w-full px-6 py-3 bg-lime-700 dark:bg-emerald-700 text-lime-50 dark:text-emerald-50 font-bold uppercase rounded-md shadow-md hover:bg-lime-800 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 transform hover:scale-105 transition-all duration-300 ease-in-out text-lg tracking-wider">
        Verify
      </button>
      <button class="text-sm text-lime-800 dark:text-lime-300 hover:text-lime-900 dark:hover:text-lime-200 transition-colors duration-200" aria-label="Report an issue with CAPTCHA">
        Can't read the image?
      </button>
    </div>
  </div>
</div>

Search Components

Categories

CAPTCHA