Componente CAPTCHA
Un componente CAPTCHA complejo, inspirado en el código, con una combinación de colores dulces/dulces, diseñado para interfaces de redes sociales. Cuenta con un diseño responsivo, compatibilidad con el modo oscuro y elementos interactivos.
Código HTML
<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>> _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>> user_action: click_matching_pair()
> goal: prove_humanity()
> 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>
Componentes relacionados
Componente CAPTCHA de Glassmorphism
Un componente CAPTCHA simple con un estilo de diseño de glassmorphism. Ideal para sitios web de comercio electrónico, con un efecto translúcido similar al vidrio esmerilado, compatibilidad con el modo oscuro y una combinación de colores en escala de grises.
Componente Retro Vintage CAPTCHA
Un componente CAPTCHA simple diseñado con una estética retro nostálgica, combinación de colores vibrantes, adecuado para sitios web comerciales y corporativos, con soporte para modo oscuro.
Componente CAPTCHA
Un componente CAPTCHA inspirado en Material Design con una combinación de colores vibrantes, diseñado para aplicaciones de redes sociales. Totalmente receptivo con soporte para modo oscuro.