Composants CAPTCHA Composant CAPTCHA

Composant CAPTCHA

Un composant CAPTCHA conçu selon les principes de Material Design et de Tailwind CSS, adapté aux sites Web de commerce électronique, avec prise en charge du thème sombre et conception réactive.

Aperçu

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>

Composants associés

Composant CAPTCHA

Composant CAPTCHA réactif avec micro-interactions, prise en charge du thème sombre et images d’espace réservé aléatoires.

Ouvrir

Glassmorphism_CAPTCHA_Component_Forest_Green

Un composant CAPTCHA réactif de style glassmorphism avec une palette de couleurs vert forêt, adapté aux applications manufacturières/industrielles. Inclut la prise en charge du mode sombre.

Ouvrir

Composant CAPTCHA rétro/vintage

Un composant CAPTCHA de style rétro conçu pour les interfaces de médias sociaux, avec des couleurs vives et une mise en page complexe avec un design réactif et une prise en charge du thème sombre.

Ouvrir