Componente retro CAPTCHA
Un componente CAPTCHA con una estética Retro/Vintage y colores pastel, diseñado para paneles de visualización de datos con soporte para modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
<p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
</div>
<div class="flex flex-col items-center mt-6">
<label class="flex items-center mb-4">
<input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
<span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
</label>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>Componentes relacionados
CAPTCHA minimalista
Un componente CAPTCHA responsivo con soporte para modo oscuro, con un diseño minimalista con colores pastel. Incluye una casilla de verificación simple y un marcador de posición para texto.
Componente CAPTCHA brutalista
Un componente CAPTCHA crudo y audaz diseñado con un esquema de color en escala de grises, adecuado para una interfaz de tablero, que incluye funciones interactivas para la verificación del usuario.
Componente CAPTCHA
Un componente CAPTCHA simple diseñado con principios de Material Design y un esquema de color pastel para sitios web comerciales / corporativos.