Search Components

CAPTCHA

Challenge-response test to determine human users

Luxury_Premium_CAPTCHA_Weather_Component

A complex, luxury-themed CAPTCHA component for weather/climate applications, featuring cool neutral colors, sophisticated typography, and responsive design with dark mode support. It includes elements like a visual challenge, a 'Current Weather' display, and a 'Climate Data' section.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-10">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b border-gray-100 dark:border-gray-700">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight mb-2 sm:mb-0">
          ClimateGuard Verification
        </h1>
        <div class="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
          <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="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
          </svg>
          <span class="text-sm sm:text-base font-medium">Secure Access to Climate Data</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div class="flex flex-col">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Verify You Are Human</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg mb-6 leading-relaxed">
            To proceed and access comprehensive climate data, please complete the security challenge below.
            This helps us ensure data integrity and protect against automated access.
          </p>

          <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-inner border border-gray-100 dark:border-gray-600 mb-6">
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Click on all images containing <span class="text-blue-600 dark:text-blue-400">'Stratocumulus Clouds'</span>:</p>
            <div class="grid grid-cols-3 gap-2 sm:gap-3">
              <button aria-label="Image 1" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1041/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
              <button aria-label="Image 2" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1018/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
              <button aria-label="Image 3" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/23/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
              <button aria-label="Image 4" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1053/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
              <button aria-label="Image 5" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/10/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
              <button aria-label="Image 6" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1004/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" 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>
                </div>
              </button>
            </div>
            <div class="flex justify-between items-center mt-6">
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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 16.087v-2.383m1.342 8.868L9.932 20m5.39-16.712L15.932 4.07m-5.463 8.356L2 10.978L6 6L10 10.978L6 14L2 10.978" />
                </svg>
                New Challenge
              </button>
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.898 8.016l-3.69-3.69A2.25 2.25 0 0014.545 3H9.455c-.876 0-1.724.35-2.355.981L3.414 8.016m16.484 0l-3.69 3.69-3.69 3.69-3.69-3.69-3.69-3.69m7.38 0L9.454 3c-.876-.35-1.724-.981-2.355-2.355L3.414.016M12 21a9 9 0 100-18 9 9 0 000 18z" />
                </svg>
                Audio Challenge
              </button>
            </div>
          </div>

          <button type="submit" class="w-full py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-xl shadow-lg transition-all duration-300 transform active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
            Validate Access
            <span class="ml-2 inline-block transition-transform group-hover:translate-x-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zM4 10a1 1 0 011-1h9a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </span>
          </button>

        </div>

        <div class="space-y-8">
          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Current Weather Overview</h2>
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl transform transition-all duration-300 hover:scale-[1.02]">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-5xl font-extrabold">24°C</p>
                  <p class="text-xl font-medium">London</p>
                </div>
                <img src="https://www.flaticon.com/svg/static/icons/svg/861/861056.svg" alt="Sunny icon" class="w-20 h-20 filter drop-shadow-lg">
              </div>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>Wind: 15 km/h</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/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="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.82l-.956-.956M15.82 4.18l.956-.956m-7.82 15.64l-.956.956m7.82-15.64l.956.956m-7.82 15.64l.956.956m-7.82 15.64l-.956.956M4.18 15.82l-.956.956m-1.956-6.75l.956-.956m15.64 7.82l.956.956M4.18 4.18l-.956-.956" />
                  </svg>
                  <span>Humidity: 65%</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/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="M17.657 16.7L13.257 21a2 2 0 01-3.514 0L6.343 16.7A8 8 0 1117.657 16.7z" />
                  </svg>
                  <span>UV Index: 7 (High)</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/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="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
                  </svg>
                  <span>Precipitation: 0%</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Global Climate Data Insights</h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 sm:p-8 shadow-inner border border-gray-100 dark:border-gray-600">
              <div class="flex items-start mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Climate scientist profile" class="w-16 h-16 rounded-full mr-4 shadow-lg border-2 border-blue-500 dark:border-blue-400">
                <p class="text-gray-700 dark:text-gray-200 text-lg">
                  "Recent data indicates a significant increase in global average temperatures. Urgent action is needed."
                  <br>
                  <span class="font-medium text-blue-600 dark:text-blue-400 text-sm">- Dr. Elara Vance, Climatologist</span>
                </p>
              </div>
              <ul class="list-none space-y-3 text-gray-600 dark:text-gray-300">
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 0a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm1 3a1 1 0 100 2h2a1 1 0 100-2H8z" clip-rule="evenodd" />
                  </svg>
                  Average Global Temperature: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">+1.2°C since pre-industrial levels</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                  CO2 Concentration: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">419 ppm (Parts Per Million)</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l-2.293 2.293A1 1 0 0015 13.586V15h3a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2v-2a2 2 0 012-2h3.586l2.293-2.293A1 1 0 0010.586 1L1 18.293V18h3.586l2.293-2.293A1 1 0 006 14.586V1h3a2 2 0 012 2v1H6zm4 0V5a1 1 0 00-1-1H9a1 1 0 00-1 1v1h2z" clip-rule="evenodd" />
                  </svg>
                  Sea Level Rise: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">~3.6 mm/year</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        <p>&copy; 2023 ClimateGuard. All rights reserved. Your data security is our priority.</p>
      </div>
    </div>
  </div>
</div>

Skeuomorphic CAPTCHA Component

A skeuomorphic CAPTCHA component designed for event/conference websites, featuring a triadic color scheme and dark mode support. It mimics real-world digital elements with interactive buttons.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-xl border border-gray-400 dark:border-gray-600 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01] overflow-hidden relative">
    <!-- Top 'screen' bezel effect -->
    <div class="absolute top-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-t-3xl shadow-inner-top blur-sm"></div>
    <div class="absolute bottom-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-b-3xl shadow-inner-bottom blur-sm"></div>

    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Verify you are human!</h2>

      <div class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 mb-8 border border-gray-300 dark:border-gray-600 shadow-inner flex flex-col items-center space-y-4">
        <p class="text-lg text-gray-700 dark:text-gray-200 text-center mb-4">Please select all squares with:</p>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-teal-400 drop-shadow-lg">Traffic Lights</div>

        <div class="grid grid-cols-3 gap-3 w-full max-w-xs mx-auto">
          <!-- Captcha Grid Items -->
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=1" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=2" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=3" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=4" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=5" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=6" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=7" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=8" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=9" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex justify-between items-center">
        <button class="px-6 py-3 bg-gradient-to-br from-yellow-300 to-amber-400 dark:from-yellow-600 dark:to-orange-700 text-gray-800 dark:text-gray-100 font-semibold rounded-xl shadow-lg border border-yellow-500 dark:border-orange-800 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:ring-opacity-70 dark:focus:ring-orange-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Refresh</span>
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>

        <button class="px-8 py-3 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 text-white font-semibold rounded-xl shadow-lg border border-blue-700 dark:border-indigo-900 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-indigo-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Verify</span>
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Just for demonstration: Simulate click effect with JS (not part of the deliverable) -->
<script>
  document.querySelectorAll('.captcha-grid-item').forEach(button => {
    button.addEventListener('click', () => {
      button.classList.toggle('is-selected');
    });
  });
</script>

<style>
  .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .drop-shadow-md {
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  }
  .drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  }
</style>

ArtDecoCaptchaComponent

A simple, responsive CAPTCHA component with an Art Deco design aesthetic, using autumn colors suitable for business/corporate websites, with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-orange-100 via-amber-200 to-yellow-200 dark:from-stone-900 dark:via-stone-800 dark:to-stone-700 p-4 font-serif">
  <div class="w-full max-w-sm bg-gradient-to-br from-amber-50 dark:from-stone-800 to-orange-100 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden
    border-4 border-amber-800 dark:border-stone-600
    transform skew-y-1 hover:skew-y-0 transition-transform duration-500 ease-in-out
    relative overflow-hidden group">

    <!-- Art Deco Top Border Effect -->
    <div class="absolute top-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-top-left">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

    <!-- Art Deco Background Pattern Simulation -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
            <rect x="5" y="5" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill="url(#artDecoPattern)"/>
      </svg>
    </div>

    <div class="art-deco-frame p-8 relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-stone-100 mb-6 text-center tracking-wider uppercase drop-shadow-md group-hover:scale-105 transition-transform duration-300">
        Verification Required
      </h2>

      <div class="mb-6 text-center">
        <p class="text-sm text-lime-950 dark:text-stone-300 mb-4">Please verify you are not a robot.</p>
        <div class="w-48 h-20 bg-gradient-to-r from-amber-200 to-orange-300 dark:from-stone-700 dark:to-stone-600 rounded drop-shadow-lg mx-auto flex items-center justify-center
          border-2 border-amber-700 dark:border-stone-500
          transform rotate-1 skew-x-2 group-hover:rotate-0 group-hover:skew-x-0 transition-transform duration-500 ease-in-out animate-pulse-slight">
          <span class="text-3xl font-extrabold text-amber-800 dark:text-orange-300 tracking-widest select-none leading-none">A2k9X</span>
        </div>
        <button class="mt-4 text-xs text-amber-700 dark:text-stone-400 hover:text-amber-900 dark:hover:text-stone-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <i class="fas fa-sync-alt mr-1"></i> Regenerate Code
        </button>
      </div>

      <div class="mb-6 relative">
        <label for="captchaInput" class="sr-only">Enter CAPTCHA Code</label>
        <input type="text" id="captchaInput" placeholder="Enter code" class="block w-full px-4 py-3 rounded-md text-base bg-amber-50 dark:bg-stone-700 text-lime-950 dark:text-stone-200
          border-2 border-amber-600 dark:border-stone-500 placeholder-amber-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-50 dark:focus:ring-opacity-50
          transition-all duration-300 ease-in-out shadow-inner
          transform group-hover:-translate-y-0.5 group-hover:scale-[1.01]">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none ">
          <svg class="h-5 w-5 text-amber-500 dark:text-stone-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.5 9V7a3.5 3.5 0 017 0v2h.5a2 2 0 012 2v5a2 2 0 01-2 2h-9a2 2 0 01-2-2v-5a2 2 0 012-2h.5zM8 7a1.5 1.5 0 013 0v2H8V7zm0 6a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>

      <button type="submit" class="w-full py-3 rounded-md text-lg font-semibold
        bg-amber-800 hover:bg-amber-900 dark:bg-stone-600 dark:hover:bg-stone-700
        text-white dark:text-stone-100 shadow-xl
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95
        focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-60 dark:focus:ring-opacity-60
        border-b-4 border-r-4 border-amber-900 dark:border-stone-800 drop-shadow-lg">
        Submit
      </button>
    </div>

    <!-- Art Deco Bottom Border Effect -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-bottom-right">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

  </div>
</div>

Retro_Candy_CAPTCHA_Component

A complex, retro/vintage style CAPTCHA component with a candy/sweet color scheme, designed for booking and reservation systems. Features multiple interactive elements, fully responsive layout, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-900 via-pink-900 to-indigo-900 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="h-24 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 flex items-center justify-center relative">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white uppercase tracking-wider drop-shadow-lg text-center relative z-10">
        <span class="block transform -rotate-6 scale-90">Verifying Identity</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center transform -rotate-12 bounce-slow">
        <div class="w-16 h-16 bg-pink-300 dark:bg-pink-500 rounded-full opacity-30"></div>
        <div class="w-12 h-12 bg-purple-300 dark:bg-purple-500 rounded-full opacity-30 ml-8"></div>
      </div>
    </div>

    <div class="p-6 sm:p-8">
      <p class="text-center text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 font-semibold leading-relaxed">
        To book your sweet slot, please complete the CAPTCHA.
      </p>

      <div class="space-y-6">
        <!-- Image Selection CAPTCHA -->
        <div class="bg-pink-100 dark:bg-pink-900 p-4 rounded-xl border border-pink-300 dark:border-pink-700 shadow-inner animation-pulse-light">
          <h3 class="text-lg sm:text-xl font-bold text-pink-700 dark:text-pink-300 mb-4">Select all squares with <span class="text-purple-600 dark:text-purple-400">Cupcakes</span></h3>
          <div class="grid grid-cols-3 gap-2">
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1053/300/300" alt="Image 1" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/108/300/300" alt="Image 2" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1041/300/300" alt="Image 3" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1025/300/300" alt="Image 4" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/103/300/300" alt="Image 5" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1069/300/300" alt="Image 6" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
          </div>
        </div>

        <!-- Audio CAPTCHA (simplified for HTML only) -->
        <div class="bg-purple-100 dark:bg-purple-900 p-4 rounded-xl border border-purple-300 dark:border-purple-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300 mb-4">Listen and type the numbers you hear:</h3>
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <button class="flex-shrink-0 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500">
              <i class="fas fa-play mr-2"></i> Play Audio
            </button>
            <input type="text" placeholder="Enter numbers here" class="flex-grow w-full sm:w-auto p-3 rounded-full border-2 border-purple-300 dark:border-purple-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 shadow-sm">
          </div>
        </div>

        <!-- Drag & Drop / Slider CAPTCHA (simplified for HTML only) -->
        <div class="bg-mint-100 dark:bg-green-900 p-4 rounded-xl border border-mint-300 dark:border-green-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-mint-700 dark:text-green-300 mb-4">Drag the <span class="text-purple-600 dark:text-purple-400">Candy</span> into the frame:</h3>
          <div class="flex justify-center items-center gap-4">
            <div class="w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-700 rounded-lg border-4 border-dashed border-mint-400 dark:border-green-600 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm overflow-hidden relative">
              <img src="https://picsum.photos/id/214/100/100" class="absolute inset-0 object-cover opacity-30 blur-sm" />
              <span class="relative z-10">Drop Zone</span>
            </div>
            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-pink-300 dark:bg-pink-700 rounded-full flex items-center justify-center text-white text-3xl shadow-md cursor-grab transform transition-transform duration-200 hover:scale-110">
              🍬
            </div>
          </div>
        </div>

        <!-- ReCAPTCHA-like checkbox -->
        <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600 shadow-inner">
          <label for="iamnotarobot" class="flex items-center cursor-pointer">
            <input type="checkbox" id="iamnotarobot" name="iamnotarobot" class="form-checkbox h-7 w-7 text-green-500 rounded-md border-2 border-gray-400 dark:border-gray-500 focus:ring-green-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            <span class="ml-3 text-lg sm:text-xl text-gray-700 dark:text-gray-300 font-semibold">I'm not a robot!</span>
          </label>
        </div>

        <button type="submit" class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white text-2xl font-extrabold uppercase rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:from-pink-600 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500 disco-shadow">
          Confirm Reservation
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-pink-200 dark:bg-pink-900 border-t-4 border-pink-400 dark:border-pink-600 flex justify-center items-center text-sm text-pink-700 dark:text-pink-300">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Captcha Mascot" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-500 dark:border-pink-700 shadow-md">
      <p>Powered by SweetGuard™ &copy; 2023</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-5px) rotate(-12deg); }
  }

  .bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
  }

  @keyframes pulse-light {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 192, 203, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 192, 203, 0.8); }
  }

  .animation-pulse-light {
    animation: pulse-light 2s infinite alternate;
  }

  .dark .animation-pulse-light {
    animation: none; /* Disable light pulse in dark mode for better visibility */
  }

  .disco-shadow {
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7), 0 0 30px rgba(138, 43, 226, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .disco-shadow:hover {
    box-shadow: 0 0 25px rgba(255, 105, 180, 1), 0 0 50px rgba(138, 43, 226, 0.8);
  }

  /* Custom colors for better specificity and semantics */
  .bg-mint-100 { background-color: #e0fdf5; /* Light mint */ }
  .dark\:bg-green-900 { background-color: #0d362d; /* Darker green for dark mode */ }
  .border-mint-300 { border-color: #92e0c1; /* Medium mint */ }
  .dark\:border-green-700 { border-color: #1a624d; /* Dark green for dark mode */ }
  .text-mint-700 { color: #218360; /* Dark mint */ }
  .dark\:text-green-300 { color: #81e2b5; /* Light green for dark mode */ }
</style>

Retro_Captcha_Component

A retro/vintage style CAPTCHA component with ocean/blue tones, designed for consulting/services websites. Features a complex interface with a distorted image, audio challenge, and an input field.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-300 to-blue-600 dark:from-gray-900 dark:to-blue-900 p-4 font-mono sm:p-6 lg:p-8">
  <div class="w-full max-w-md rounded-lg shadow-xl overflow-hidden border-4 border-blue-900 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-800 dark:to-blue-950 transform rotate-[-2deg] skew-y-1 relative motion-safe:transition-transform motion-safe:duration-300 hover:rotate-0 hover:skew-y-0">
    <div class="absolute inset-0 bg-blue-200 opacity-20 dark:bg-blue-900 dark:opacity-30 blur-sm pointer-events-none"></div>
    <div class="p-6 relative z-10 space-y-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-blue-900 uppercase tracking-widest text-shadow-sm dark:text-blue-100 dark:text-shadow-md text-center transform rotate-[-1deg]">
        SYSTEM AUTHENTICATION
      </h2>
      <p class="text-sm text-blue-800 text-center font-semibold dark:text-blue-200 leading-snug transform skew-y-1">
        Please prove you're not a robot by completing the challenge below.
      </p>

      <div class="bg-blue-600 border-4 border-blue-900 p-2 rounded transform rotate-[1deg] shadow-lg dark:bg-blue-950 dark:border-blue-700">
        <div class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-400 aspect-video overflow-hidden relative dark:bg-gray-700 dark:border-gray-600">
          <img src="https://picsum.photos/400/150?blur=5&grayscale&random=1" alt="Distorted CAPTCHA image" class="w-full h-full object-cover transform scale-110 rotate-[-3deg] skew-y-2 opacity-80 filter blur-[0.5px] contrast-150 brightness-110" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100/30 via-blue-500/10 to-blue-900/40 dark:from-gray-700/30 dark:via-gray-900/10 dark:to-gray-950/40"></div>
          <p class="absolute text-3xl sm:text-4xl lg:text-5xl font-black text-blue-950 tracking-widest leading-none select-none drop-shadow-lg transform rotate-[3deg] skew-x-3 dark:text-blue-200 dark:drop-shadow-xl">
            <span class="inline-block rotate-[-5deg]">P</span>
            <span class="inline-block rotate-[2deg]">R</span>
            <span class="inline-block rotate-[-1deg]">0</span>
            <span class="inline-block rotate-[4deg]">T</span>
            <span class="inline-block rotate-[-3deg]">E</span>
            <span class="inline-block rotate-[1deg]">C</span>
            <span class="inline-block rotate-[-2deg]">T</span>
          </p>
          <div class="absolute bottom-2 right-2 flex space-x-2">
            <button aria-label="Refresh CAPTCHA" class="p-1.5 bg-blue-200 rounded-full text-blue-800 hover:bg-blue-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 shadow-md transform hover:scale-105 active:scale-95 transition-transform duration-150">
              <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 12v.622m15.356-2A8.001 8.001 0 0120 12v.622"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
        <div class="flex-1">
          <label for="captcha-input" class="block text-sm font-bold text-blue-800 uppercase mb-2 dark:text-blue-200 transform -rotate-[0.5deg]">
            Verify Code:
          </label>
          <input type="text" id="captcha-input" placeholder="Enter the text above..." class="w-full px-4 py-2 bg-blue-50 border-4 border-blue-700 rounded-md text-blue-900 placeholder-blue-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-900 outline-none shadow-inner transform skew-y-[-0.5deg] text-lg lg:text-xl dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-400">
        </div>
        <div class="flex-shrink-0 flex items-end justify-center pt-2 md:pt-0">
          <button aria-label="Play audio CAPTCHA" class="p-3 bg-blue-700 rounded-md text-white border-2 border-blue-900 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-md transform rotate-[2deg] hover:rotate-0 active:scale-95 transition-all duration-200 dark:bg-blue-600 dark:border-blue-800 dark:hover:bg-blue-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.998 9.998 0 0119 10a9.998 9.998 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.998 7.998 0 0017 10c0-2.222-.89-4.212-2.343-5.657a1 1 0 010-1.414zm-2.828 2.828a1 1 0 011.414 0A5.996 5.996 0 0115 10a5.996 5.996 0 01-1.757 4.243 1 1 0 01-1.414-1.414A3.996 3.996 0 0013 10c0-1.03-1.04-2.176-1.707-2.828a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="pt-4">
        <button type="submit" class="w-full py-3 px-6 bg-blue-900 text-blue-50 uppercase font-extrabold rounded-md shadow-lg border-2 border-blue-950 focus:outline-none focus:ring-4 focus:ring-blue-400 hover:bg-blue-800 dark:bg-blue-700 dark:text-blue-100 dark:border-blue-900 dark:hover:bg-blue-600 transform skew-x-[-1deg] rotate-[0.5deg] tracking-wide text-lg sm:text-xl motion-safe:transition-transform motion-safe:duration-300 hover:skew-x-0 hover:rotate-0 active:scale-98">
          SUBMIT VERIFICATION
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 right-0 p-2 text-blue-900 text-xs opacity-70 dark:text-blue-200 dark:opacity-50 transform rotate-[-2deg]">
      &copy; 2023 RETRO-SECURE. ALL RIGHTS RESERVED.
    </div>
  </div>
</div>

<style>
  /* Custom text-shadow for a retro feel */
  .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.4);
  }
  .dark .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(50, 100, 200, 0.2);
  }
  
  .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), 2px 2px 0px rgba(255, 255, 255, 0.5);
  }
  .dark .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6), 2px 2px 0px rgba(50, 100, 200, 0.4);
  }
</style>

CAPTCHA Component

A complex, code-inspired CAPTCHA component with a candy/sweet color scheme, designed for social media interfaces. Features a responsive layout, dark mode support, and interactive elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-950 dark:to-pink-950 font-mono">
  <div class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 border-2 border-pink-300 dark:border-purple-600 transform transition duration-300 hover:scale-[1.02] overflow-hidden">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-6 pb-4 border-b-2 border-pink-200 dark:border-purple-700">
      <h2 class="text-2xl font-bold text-pink-600 dark:text-purple-400"><span class="text-4xl pr-2">🔐</span>&gt; _verify_identity</h2>
      <span class="text-sm text-pink-400 dark:text-purple-500">v1.0.1_beta</span>
    </div>

    <!-- Instruction Panel -->
    <div class="mb-6 p-4 rounded bg-pink-50 dark:bg-gray-700 border border-pink-200 dark:border-purple-600 text-pink-800 dark:text-gray-300 text-sm leading-relaxed overflow-x-auto">
      <pre class="whitespace-pre-wrap"><code>&gt; user_action: click_matching_pair()
&gt; goal: prove_humanity()
&gt; status: pending...

_Choose the two images that form a logical pair.</code></pre>
    </div>

    <!-- Image Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
      <!-- Image 1 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/60/200/200" alt="Image 1" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_001]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 2 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/61/200/200" alt="Image 2" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_002]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 3 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/62/200/200" alt="Image 3" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_003]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 4 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/63/200/200" alt="Image 4" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_004]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 5 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/64/200/200" alt="Image 5" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_005]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 6 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/65/200/200" alt="Image 6" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_006]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-between items-center gap-4">
      <button class="flex-1 py-3 px-4 rounded-lg bg-pink-500 dark:bg-purple-600 text-white dark:text-gray-100 font-bold text-lg hover:bg-pink-600 dark:hover:bg-purple-700 transition-all duration-200 transform hover:scale-105 shadow-md 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"></path></svg>
        _confirm(_selection)
      </button>
      <button title="Refresh images" class="p-3 rounded-lg bg-mint-50 dark:bg-gray-700 border border-mint-200 dark:border-purple-600 text-mint-600 dark:text-purple-400 hover:bg-mint-100 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-110 shadow-sm">
        <svg class="w-6 h-6" 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 12v.621m15.821-6.196L15.424 4.1a1.999 1.999 0 00-2.616.488L7 12m10 8l-4.168-4.168A1.999 1.999 0 0013.916 16H8a1.999 1.999 0 00-1.999 1.999v1.001m0-8h.01M20 12l-1 1-1-1"></path></svg>
      </button>
    </div>

    <!-- Footer Info -->
    <div class="mt-6 pt-4 border-t-2 border-pink-200 dark:border-purple-700 text-center text-xs text-pink-400 dark:text-gray-500">
      <p>_powered_by: secure_identity_protocol_v2.1</p>
      <div class="flex items-center justify-center mt-2">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Developer Avatar" class="h-6 w-6 rounded-full mr-2 border border-pink-300 dark:border-purple-600">
        <span class="text-pink-500 dark:text-purple-400">// CAPTCHA_DevTeam Inc.</span>
      </div>
    </div>

  </div>
</div>

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

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

Open Preview

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

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

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

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

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

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

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

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

      <div class="flex justify-between items-center mb-6">
        <button class="flex items-center text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.88 1.14 5.518 3 7.493l1.884-1.884m5.348-2.604A7.962 7.962 0 0110 20c-5.14 0-8.862-5.714-8.862-5.714L10 10l-1.884 1.884"></path></svg>
          Reload Challenge
        </button>
        <a href="#" class="text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          Get a new challenge
        </a>
      </div>

      <button class="w-full flex items-center justify-center bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-600/40 dark:bg-amber-600 dark:hover:bg-amber-700 dark:shadow-amber-500/40 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

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

CAPTCHA Component

A simple, clean, monospace-themed CAPTCHA component for food/restaurant websites, featuring a grayscale color scheme and full responsiveness 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-sm rounded-lg shadow-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="p-6 space-y-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 text-center">
        Verify You Are Human
      </h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 text-center leading-relaxed">
        To proceed, please select all images containing <span class="text-gray-900 dark:text-gray-100 font-semibold">burgers</span>.
      </p>
      <div class="grid grid-cols-3 gap-2">
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1084/300/200" alt="Image 1" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/433/300/200" alt="Image 2" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1069/300/200" alt="Image 3" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/228/300/200" alt="Image 4" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/111/300/200" alt="Image 5" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/350/300/200" alt="Image 6" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between pt-4">
        <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
          <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 12v2m7 12h.582M20 20v-5h-.582m0 0a8.005 8.005 0 00-15.356-2L4 12V4"></path></svg>
          <button class="text-sm hover:underline focus:outline-none">Reload</button>
        </div>
        <button class="px-5 py-2 bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-opacity-50">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component

A clean, minimalist CAPTCHA component with a Swiss/International Typography design style, featuring ocean/blue tones. Designed for event and conference websites, it's responsive and includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:border dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-blue-800 dark:text-blue-300 text-center">
        Verify Humanity
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed">
        To proceed, please complete the security check below.
      </p>

      <div class="space-y-4">
        <!-- CAPTCHA Main Area -->
        <div class="p-4 bg-blue-50 dark:bg-gray-700 rounded-md border border-blue-200 dark:border-gray-600 shadow-inner flex flex-col items-center justify-center min-h-[140px] relative">
          <!-- Loading/Placeholder state -->
          <div class="absolute inset-0 flex items-center justify-center bg-blue-50 dark:bg-gray-700 rounded-md z-0 opacity-100 transition-opacity duration-300" id="captcha_loading_state">
            <div class="w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
            <span class="ml-3 text-blue-600 dark:text-blue-400 text-sm">Loading CAPTCHA...</span>
          </div>

          <!-- Simulated CAPTCHA content (initially hidden) -->
          <div class="flex flex-col items-center justify-center space-y-4 opacity-0 transition-opacity duration-300" id="captcha_content_state">
            <img src="https://picsum.photos/seed/captcha/300/100" alt="Image CAPTCHA" class="w-full max-w-[300px] h-auto rounded-sm border border-gray-300 dark:border-gray-500 shadow-sm">
            <p class="text-sm text-gray-700 dark:text-gray-300 font-medium">What do you see in the image?</p>
            <input type="text" placeholder="Enter text here" class="w-full p-2.5 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white text-base transition-all duration-200">
          </div>
        </div>

        <!-- Refresh/Audio Buttons -->
        <div class="flex justify-between items-center gap-2">
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" 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 12c0 2.21.823 4.239 2.207 5.768m0-11.536c1.384-1.529 3.314-2.207 5.346-2.207 4.493 0 8.002 3.614 8.002 8s-3.509 8-8.002 8c-2.21 0-4.239-.823-5.768-2.207m0-11.536H16h-4" /></svg>
            Refresh
          </button>
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.899a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.647 11 4.103 11 5v14c0 .897-.077 1.353-.293 1.586l-4.707-4.707z" /></svg>
            Audio
          </button>
        </div>
      </div>

      <!-- Submit Button -->
      <button class="w-full flex justify-center items-center py-3 px-6 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center leading-snug pt-2">
        This site is protected by reCAPTCHA and the Google
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</a> and
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms of Service</a> apply.
      </p>
    </div>
  </div>
</div>

<script>
  // Simulate CAPTCHA loading
  document.addEventListener('DOMContentLoaded', () => {
    const loadingState = document.getElementById('captcha_loading_state');
    const contentState = document.getElementById('captcha_content_state');

    setTimeout(() => {
      loadingState.classList.add('opacity-0');
      loadingState.classList.remove('z-0');
      loadingState.classList.add('z-10');
      contentState.classList.remove('opacity-0');
      contentState.classList.add('opacity-100');
    }, 1500);
  });
</script>

Glassmorphism_CAPTCHA_Component_Forest_Green

A responsive glassmorphism-style CAPTCHA component with a forest green color scheme, suitable for manufacturing/industrial applications. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-green-100 via-green-50 to-emerald-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-900 p-4 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white/20 dark:bg-gray-800/30 backdrop-blur-lg rounded-2xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden p-6 sm:p-8">
    <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/20 to-green-600/20 dark:from-gray-700/20 dark:to-gray-900/20 rounded-2xl animate-pulse-slow"></div>
    <div class="relative z-10 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-900 dark:text-green-200 text-center flex items-center justify-center gap-2">
        <svg class="w-8 h-8 text-emerald-700 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="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.944 12c0 2.879 1.136 5.513 2.944 7.465S9.123 21.052 12 21.052c2.879 0 5.513-1.136 7.465-2.944S21.052 14.879 21.052 12A12.01 12.01 0 0018.06 7.004z"></path></svg>
        Security Check
      </h2>
      <p class="text-lg text-green-800 dark:text-green-300 text-center">
        Please verify you are not a robot.
      </p>

      <!-- Example: Image CAPTCHA -->
      <div class="bg-white/40 dark:bg-gray-700/40 border border-t-white border-l-white dark:border-t-gray-600 dark:border-l-gray-600 border-b-white/50 border-r-white/50 dark:border-b-gray-600/50 dark:border-r-gray-600/50 rounded-lg p-4 shadow-inner space-y-4">
        <p class="text-green-900 dark:text-green-100 text-center font-medium">Select all squares with a <span class="font-bold text-emerald-700 dark:text-emerald-400">forklift</span>:</p>
        <div class="grid grid-cols-3 gap-2">
          <button class="captcha-grid-item group" aria-label="Image 1">
            <img src="https://picsum.photos/id/1084/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 2">
            <img src="https://picsum.photos/id/400/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" 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>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 3">
            <img src="https://picsum.photos/id/35/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 4">
            <img src="https://picsum.photos/id/29/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" 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>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 5">
            <img src="https://picsum.photos/id/1060/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 6">
            <img src="https://picsum.photos/id/426/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 7">
            <img src="https://picsum.photos/id/194/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 8">
            <img src="https://picsum.photos/id/145/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" 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>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 9">
            <img src="https://picsum.photos/id/175/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
        </div>
      </div>

      <div class="flex items-center justify-between gap-4">
        <button class="inline-flex items-center justify-center p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-green-800 dark:text-green-300 hover:text-emerald-700 dark:hover:text-emerald-200 transition-colors border border-white/60 dark:border-gray-600/60 shadow-md" aria-label="Refresh CAPTCHA">
          <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 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.127.818 4.044 2.146 5.5M16 4v5h.582m-15.356 2A8.001 8.001 0 0120 12c0-2.127-.818-4.044-2.146-5.5"></path></svg>
        </button>
        <button class="flex-1 py-3 px-6 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white/20 dark:focus:ring-offset-gray-800/20">
          Verify
        </button>
      </div>

      <p class="text-sm text-center text-green-700 dark:text-green-400 opacity-80">
        Protected by Industrial CAPTCHA™
      </p>
    </div>
  </div>
</div>

<style>
  /* Animation for the background blob */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.05); opacity: 0.3; }
  }

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

  /* CAPTCHA grid item styles */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* For square aspect ratio */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
  }

  .captcha-grid-item:hover {
    border-color: rgba(5, 150, 105, 0.6); /* emerald-600 with transparency */
    transform: scale(1.02);
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 150, 105, 0.4); /* emerald-600 with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(5, 150, 105, 0.7); /* More opaque when selected */
  }

  .captcha-grid-item.selected {
    border-color: #059669; /* Solid emerald-600 when selected */
  }

  /* Dark mode adjustments for border colors */
  .dark .captcha-grid-item {
    background-color: rgba(55, 65, 81, 0.6); /* gray-700/60 */
  }

  .dark .captcha-grid-item:hover {
    border-color: rgba(16, 185, 129, 0.6); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected {
    border-color: #10B981; /* Solid emerald-500 dark mode */
  }
  .dark .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.4); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.7); /* More opaque when selected */
  }
</style>

Search Components

Categories

CAPTCHA