Retro Vintage CAPTCHA para Redes Sociales
Un componente CAPTCHA retro-vintage para redes sociales, con colores vibrantes, complejidad moderada, capacidad de respuesta y soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
<!-- CAPTCHA Image/Challenge Area -->
<div class="relative mb-6">
<img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
<div class="absolute inset-0 bg-black opacity-25"></div>
<div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
kS7p#aG9
</div>
</div>
<!-- Input Field -->
<div class="mb-6">
<label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
Enter the characters you see:
</label>
<input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
</div>
<!-- Reload and Audio Buttons -->
<div class="flex justify-between mb-6">
<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Reload
</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Audio
</button>
</div>
<!-- Submit Button -->
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Verify
</button>
</div>
</div>
Componentes relacionados
Componente CAPTCHA
Un componente CAPTCHA inspirado en Material Design con una combinación de colores vibrantes, diseñado para aplicaciones de redes sociales. Totalmente receptivo con soporte para modo oscuro.
Componente CAPTCHA
Un componente CAPTCHA esqueuomórfico diseñado para interfaces de redes sociales con un esquema de color triádico, con múltiples elementos interactivos y soporte para temas oscuros.
Componente CAPTCHA
Componente CAPTCHA responsivo en estilo Retro/Vintage con esquema de color Pastel y soporte para modo oscuro.