Retro-CAPTCHA
Eine reaktionsschnelle CAPTCHA-Komponente mit Erdtönen, moderater Komplexität und Retro/Vintage-Stil für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS. Kein JavaScript.
HTML-Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Verification</h2>
<div class="mb-4">
<label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Enter the characters you see below:</label>
<div class="flex items-center space-x-4">
<div class="captcha-display bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white text-xl font-mono px-4 py-2 rounded tracking-wider">
A3fG9h
</div>
<button class="px-3 py-2 bg-gray-200 dark:bg-gray-500 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
↻
</button>
</div>
</div>
<input type="text" id="captcha-input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white" placeholder="Enter CAPTCHA">
<button class="mt-6 w-full bg-amber-600 dark:bg-amber-700 text-white py-2 rounded hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
Verify
</button>
</div>
</div>
Verwandte Komponenten
Retro/Vintage CAPTCHA-Komponente
Eine CAPTCHA-Komponente im Retro-Stil, die für Social-Media-Schnittstellen entwickelt wurde, mit leuchtenden Farben und einem komplexen Layout mit responsivem Design und Unterstützung für dunkle Themen.
CAPTCHA-Komponente
Eine minimalistische/flache CAPTCHA-Komponente für die Präsentation von Portfolios, reaktionsschnell mit Unterstützung für den Dunkelmodus.
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.