CAPTCHA-Komponente
Eine einfache CAPTCHA-Komponente, die nach den Prinzipien des Material Designs und einem pastellfarbenen Farbschema für Geschäfts-/Unternehmenswebsites entwickelt wurde.
HTML-Code
<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
<div class="mt-4 flex flex-col items-center">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
<div class="mt-3 flex items-center">
<label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
<input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
</div>
</div>Verwandte Komponenten
Skeuomorphe CAPTCHA-Komponente
Eine skeuomorphe CAPTCHA-Komponente, die für Event-/Konferenz-Websites entwickelt wurde, mit einem triadischen Farbschema und Unterstützung für den Dunkelmodus. Es ahmt reale digitale Elemente mit interaktiven Schaltflächen nach.
RetroCaptcha-Komponente
Eine einfache CAPTCHA-Komponente im Retro-Stil mit einer waldgrünen Farbpalette, die für gemeinnützige/wohltätige Websites entwickelt wurde. Bietet Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Neumorphismus CAPTCHA-Komponente
Eine reaktionsschnelle, komplexe CAPTCHA-Komponente, die in einem neumorphen Stil für E-Commerce-Websites entwickelt wurde, mit Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.