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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Please Verify You're Human</h2>
<img src="https://picsum.photos/400/200" alt="Random Image" class="mb-4 rounded-lg shadow-md" />
<p class="text-gray-700 dark:text-gray-300 mb-4">Select all images with traffic lights:</p>
<div class="grid grid-cols-2 gap-4 mb-4">
<img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=3" alt="Image 3" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=4" alt="Image 4" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
</div>
<button class="bg-gray-900 hover:bg-gray-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-4 rounded transition duration-200">Verify</button>
<div class="mt-4">
<p class="text-gray-500 dark:text-gray-400 text-sm">Need help? <a href="#" class="text-blue-500 dark:text-blue-300 underline">Contact Support</a></p>
</div>
</div>Componentes relacionados
Componente CAPTCHA
Un componente CAPTCHA limpio y minimalista con un estilo de diseño de tipografía suiza/internacional, con tonos océano/azules. Diseñado para sitios web de eventos y conferencias, es responsivo e incluye soporte para modo oscuro.
Monospace_Developer_CAPTCHA_Component
Un componente CAPTCHA complejo inspirado en el código con una fuente monoespaciada, estética de terminal y una combinación de colores complementaria, diseñado para un portafolio para mostrar el trabajo. Totalmente receptivo con soporte para modo oscuro.
Retro_Vintage_Captcha_Component
Un componente CAPTCHA de temática retro/vintage para sitios web empresariales/corporativos, con una combinación de colores análoga, un diseño responsivo y compatibilidad con el modo oscuro. Evoca la estética de los años 80/90.