Componente CAPTCHA
Un componente CAPTCHA de estilo Glassmorphism con un esquema de color triádico, adecuado para plataformas de redes sociales. Presenta elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, con una complejidad media y algunas características interactivas. El diseño es responsivo e incluye soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
<h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>
<div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
<img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
<div class="flex-grow">
<p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
<div class="grid grid-cols-3 gap-2">
<img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
</div>
</div>
</div>
<div class="flex items-center text-white dark:text-gray-200 mb-6">
<input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
<label for="robot-check" class="text-sm select-none">I'm not a robot</label>
</div>
<button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Verify
</button>
<p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
</div>
</div>Componentes relacionados
Retro CAPTCHA
Un componente CAPTCHA responsivo con tonos Tierra, complejidad moderada y estilo Retro/Vintage para sitios web comerciales, con soporte para modo oscuro usando Tailwind CSS. Sin JavaScript.
Luxury_Premium_CAPTCHA_Weather_Component
Un componente CAPTCHA complejo y de temática lujosa para aplicaciones meteorológicas/climáticas, con colores neutros fríos, tipografía sofisticada y diseño receptivo con soporte para modo oscuro. Incluye elementos como un desafío visual, una pantalla de 'Clima actual' y una sección de 'Datos climáticos'.
Componente CAPTCHA
Un componente CAPTCHA simple, limpio y con temática monoespacial para sitios web de comida/restaurantes, con un esquema de color en escala de grises y una capacidad de respuesta completa con soporte para modo oscuro.