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.
Código HTML
<div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex justify-center items-center">
<input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
<button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
</div>
<div class="flex justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
</div>
</div>
</div>Componentes relacionados
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 brutalista
Un componente CAPTCHA diseñado en un estilo brutalista, con alto contraste, diseños inusuales y efectos responsivos con soporte para temas oscuros.
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.