Komponenten CAPTCHA (Englisch) Retro Vintage CAPTCHA für Social Media

Retro Vintage CAPTCHA für Social Media

Eine Retro-Vintage-CAPTCHA-Komponente für soziale Medien mit lebendigen Farben, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung des Dunkelmodus mit Tailwind CSS.

Vorschau

HTML-Code

<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>

Verwandte Komponenten

Brutalistische CAPTCHA-Komponente

Eine rohe und fette CAPTCHA-Komponente, die mit einem Graustufen-Farbschema entworfen wurde und für eine Dashboard-Oberfläche geeignet ist, einschließlich interaktiver Funktionen zur Benutzerüberprüfung.

Offen

Retro CAPTCHA-Komponente

Eine CAPTCHA-Komponente im Retro-/Vintage-Stil und in Pastellfarben, die für Datenvisualisierungs-Dashboards mit Unterstützung des Dunkelmodus entwickelt wurde.

Offen

CAPTCHA-Komponente

Eine minimalistische/flache CAPTCHA-Komponente für die Präsentation von Portfolios, reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen