CAPTCHA Component
A Material Design-inspired CAPTCHA component with a monochromatic color scheme, suitable for blogs or content sites. Features a checkbox, a reCAPTCHA-like 'I'm not a robot' text, and a placeholder image verification area. Fully responsive and supports dark mode.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
<div class="p-6 space-y-6">
<!-- CAPTCHA Header -->
<div class="flex items-center space-x-3">
<svg class="h-8 w-8 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 12c0 3.072 1.407 5.8 3.636 7.619A11.952 11.952 0 0112 21.055c3.072 0 5.8-1.407 7.619-3.636A11.952 11.952 0 0121.08 12c0-3.072-1.407-5.8-3.636-7.619z" />
</svg>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Security Check</h3>
</div>
<!-- Checkbox Area -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-inner">
<input type="checkbox" id="not-robot" class="h-6 w-6 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-blue-600 dark:checked:border-transparent cursor-pointer">
<label for="not-robot" class="text-lg text-gray-700 dark:text-gray-200 select-none cursor-pointer">I'm not a robot</label>
</div>
<!-- Verification Content Placeholder -->
<div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 space-y-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">
Please click the images containing a
<strong class="font-medium text-gray-700 dark:text-gray-200">traffic light</strong>.
Click verify once there are none left.
</p>
<div class="grid grid-cols-3 gap-2">
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/101/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/102/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/103/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/104/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/105/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/106/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
</div>
<div class="flex justify-end pt-2">
<button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
Verify
</button>
</div>
</div>
</div>
<!-- CAPTCHA Footer - reCAPTCHA branding placeholder -->
<div class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center space-x-1">
<svg class="h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-3.5-3.5L7 12l2-2 4 4 6-6 1.5 1.5L10 17z"/>
</svg>
<span>reCAPTCHA</span>
</div>
<div class="text-right">
<a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy</a>
<span> - </span>
<a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms</a>
</div>
</div>
</div>
</div>Related Components
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.
CAPTCHA Component
A Material Design styled CAPTCHA component to enhance the security of a portfolio website, featuring a dark theme and responsive design with Tailwind CSS.
Retro_Vintage_Captcha_Component
A retro/vintage themed CAPTCHA component for business/corporate websites, featuring an analogous color scheme, responsive design, and dark mode support. It evokes 80s/90s aesthetics.