RetroCaptchaComponent
Un componente CAPTCHA simple de temática retro con una paleta de colores verde bosque, diseñado para sitios web sin fines de lucro / caridad. Cuenta con capacidad de respuesta y compatibilidad con el modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-gray-900 font-mono">
<div class="w-full max-w-sm p-6 bg-lime-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-lime-600 dark:border-emerald-600 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
<h2 class="text-2xl font-bold text-lime-900 dark:text-lime-200 mb-4 text-center tracking-wider uppercase drop-shadow-md">Are you human?</h2>
<p class="text-sm text-lime-800 dark:text-lime-300 mb-6 text-center italic">Help us fight spam and protect our community.</p>
<div class="flex flex-col items-center space-y-4">
<div class="w-full bg-lime-200 dark:bg-gray-700 p-3 rounded-md border-2 border-lime-600 dark:border-emerald-600 relative overflow-hidden">
<img src="https://picsum.photos/300/100?random=1" alt="CAPTCHA image" class="w-full h-24 object-cover rounded filter grayscale sepia brightness-90 contrast-120 blur-sm">
<div class="absolute inset-0 bg-lime-300 dark:bg-gray-600 mix-blend-multiply opacity-75"></div>
<p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-lime-900 dark:text-emerald-900 font-extrabold tracking-widest uppercase rotate-3 select-none" style="text-shadow: 2px 2px
#a3e635, 4px 4px #4D7C0F;">rUn34r</p>
<button class="absolute top-2 right-2 text-lime-800 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-100 transition-colors duration-200" aria-label="Refresh CAPTCHA">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.197-.736 4.22-1.99 5.864M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.197.736-4.22 1.99-5.864" />
</svg>
</button>
</div>
<input type="text" placeholder="Enter the text above" class="w-full px-4 py-2 text-lime-900 dark:text-lime-100 bg-lime-100 dark:bg-gray-700 border-2 border-lime-600 dark:border-emerald-600 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 placeholder-lime-700 dark:placeholder-lime-300 text-center tracking-wide font-bold uppercase" aria-label="CAPTCHA input field">
<button class="w-full px-6 py-3 bg-lime-700 dark:bg-emerald-700 text-lime-50 dark:text-emerald-50 font-bold uppercase rounded-md shadow-md hover:bg-lime-800 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 transform hover:scale-105 transition-all duration-300 ease-in-out text-lg tracking-wider">
Verify
</button>
<button class="text-sm text-lime-800 dark:text-lime-300 hover:text-lime-900 dark:hover:text-lime-200 transition-colors duration-200" aria-label="Report an issue with CAPTCHA">
Can't read the image?
</button>
</div>
</div>
</div>
Componentes relacionados
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.
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.
Retro_Candy_CAPTCHA_Component
Un componente CAPTCHA complejo, de estilo retro/vintage con una combinación de colores dulces/dulces, diseñado para sistemas de reserva y reservas. Cuenta con múltiples elementos interactivos, diseño totalmente responsivo y compatibilidad con el modo oscuro.