Skeuomorphic CAPTCHA Component
A moderately complex, skeuomorphic CAPTCHA component designed with corporate blue tones, suitable for booking and reservation systems. Features responsive design and dark mode support, mimicking real-world digital elements.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
<div class="w-full max-w-md bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t border-l border-blue-50 dark:border-gray-600 p-6 sm:p-8 relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-200/50 before:to-blue-400/50 dark:before:from-gray-800/50 dark:before:to-gray-950/50 before:rounded-2xl before:blur-xl before:opacity-30 before:-z-10
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] after:from-blue-100/30 after:via-blue-50/10 after:to-transparent dark:after:from-gray-600/30 dark:after:via-gray-700/10 dark:after:to-transparent after:rounded-2xl after:-z-10">
<div class="flex items-center space-x-3 mb-6">
<svg class="h-8 w-8 text-blue-700 dark:text-blue-400 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.92c-.225.86.147 1.767.93 2.22a12.035 12.035 0 0010.51 3.251c.905-.182 1.706-.577 2.404-1.127a12.003 12.003 0 003.53-3.66c.383-.75.393-1.637.087-2.399A12.008 12.008 0 0021.08 6.92a12.01 12.01 0 00-.73-2.936z" />
</svg>
<h2 class="text-2xl sm:text-3xl font-extrabold text-blue-900 dark:text-gray-100 text-shadow-sm">Verify You're Human</h2>
</div>
<p class="text-blue-800 dark:text-gray-200 mb-6 leading-relaxed">
To proceed with your booking, please complete the CAPTCHA challenge below.
</p>
<div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-xl shadow-inner border border-blue-200 dark:border-gray-700 mb-6">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 text-blue-700 dark:text-blue-300 font-semibold mb-3 border-b border-blue-200/50 dark:border-gray-600/50 pb-2 flex items-center">
<svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2zM9 22V12h6v10" />
</svg>
Select all squares containing a <span class="text-blue-900 dark:text-white font-bold ml-1">house</span>.
</div>
<div class="captcha-grid grid grid-cols-3 gap-2">
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/10/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/433/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/292/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/400/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/296/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/1025/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/29/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/1074/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
<button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
<img src="https://picsum.photos/id/196/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
<div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
<svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
<button type="button" class="flex items-center justify-center w-full sm:w-auto px-6 py-3 bg-blue-700 text-white rounded-xl shadow-md hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out
relative overflow-hidden group
after:absolute after:top-0 after:left-0 after:w-0 after:h-full after:bg-white/20 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full">
<svg class="h-5 w-5 mr-2 -ml-1 text-white group-hover:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<span class="relative z-10">Refresh</span>
</button>
<button type="submit" class="flex items-center justify-center w-full sm:w-auto px-8 py-3 bg-gradient-to-br from-blue-600 to-blue-800 text-white font-bold rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 dark:from-blue-500 dark:to-blue-700 dark:hover:from-blue-600 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out
relative overflow-hidden group
before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-white/20 before:transition-all before:duration-300 before:ease-in-out group-hover:before:w-full">
<span class="relative z-10">Verify</span>
<svg class="h-5 w-5 ml-2 -mr-1 text-white group-hover:text-blue-50 z-10" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
</div>
<p class="text-xs text-blue-600 dark:text-gray-400 mt-6 text-center">
Your privacy matters. This helps us ensure a secure experience for all users.
</p>
</div>
</div>Related Components
Dark Mode CAPTCHA Component
A CAPTCHA component designed for dark mode UI featuring responsive effects and dark theme support.
Retro/Vintage CAPTCHA Component
A retro-styled CAPTCHA component designed for social media interfaces, featuring vibrant colors and a complex layout with responsive design and dark theme support.