CCHub Logo CCHub Tailwind Collection
Komponenten CAPTCHA (Englisch) Glassmorphism CAPTCHA-Komponente

Glassmorphism CAPTCHA-Komponente

Eine einfache CAPTCHA-Komponente mit einem Glasmorphismus-Designstil. Ideal für E-Commerce-Websites, mit einem mattglasähnlichen durchscheinenden Effekt, Unterstützung für den Dunkelmodus und einem Graustufen-Farbschema.

Vorschau

HTML-Code 

<div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
        </div>
        <div class="flex justify-center items-center">
            <input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
            <button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
        </div>
        <div class="flex justify-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
        </div>
    </div>
</div>

Verwandte Komponenten

Komplexe CAPTCHA-Komponente

Eine komplexe CAPTCHA-Komponente für Social-Media-Anwendungen mit dunklem Modus und lebendigen Farben.

Offen

Brutalistische CAPTCHA-Komponente

Eine CAPTCHA-Komponente, die im brutalistischen Stil gestaltet wurde und sich durch hohen Kontrast, ungewöhnliche Layouts und reaktionsschnelle Effekte mit Unterstützung für dunkle Themen auszeichnet.

Offen

Glassmorphism Captcha-Komponente

Eine einfache, reaktionsschnelle CAPTCHA-Komponente im Glassmorphism-Stil mit Graustufen-Farbschema und Unterstützung für den Dunkelmodus, geeignet für Blog- oder Content-Websites.

Offen