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

CAPTCHA-Komponente

Eine CAPTCHA-Komponente, die nach den Prinzipien des Material Designs und Tailwind CSS gestaltet wurde und für E-Commerce-Websites geeignet ist, mit Unterstützung für dunkle Themen und responsivem Design.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
    <div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
        </div>
        <div class="my-4">
            <label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
            <input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
        </div>
        <button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
    </div>
</div>

Verwandte Komponenten

CAPTCHA-Komponente für den Dunkelmodus

Eine CAPTCHA-Komponente, die für die Benutzeroberfläche im Dunkelmodus mit reaktionsschnellen Effekten und Unterstützung für dunkle Designs entwickelt wurde.

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

Minimalistische Captcha-Komponente

Eine einfache, reaktionsschnelle und minimalistische CAPTCHA-Komponente, die für Dashboards entwickelt wurde, ein monochromatisches Farbschema verwendet und den Dunkelmodus unterstützt.

Offen