Componentes CAPTCHA Retro Vintage CAPTCHA para Redes Sociales

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.

Vista previa

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.

Abrir

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.

Abrir

Componente CAPTCHA

Componente CAPTCHA responsivo en estilo Retro/Vintage con esquema de color Pastel y soporte para modo oscuro.

Abrir