Composant CAPTCHA
Un composant CAPTCHA inspiré du Material Design avec une palette de couleurs monochromatiques, adapté aux blogs ou aux sites de contenu. Comprend une case à cocher, un texte de type reCAPTCHA « Je ne suis pas un robot » et une zone de vérification d’image de remplacement. Entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
<div class="p-6 space-y-6">
<!-- CAPTCHA Header -->
<div class="flex items-center space-x-3">
<svg class="h-8 w-8 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 12c0 3.072 1.407 5.8 3.636 7.619A11.952 11.952 0 0112 21.055c3.072 0 5.8-1.407 7.619-3.636A11.952 11.952 0 0121.08 12c0-3.072-1.407-5.8-3.636-7.619z" />
</svg>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Security Check</h3>
</div>
<!-- Checkbox Area -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-inner">
<input type="checkbox" id="not-robot" class="h-6 w-6 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-blue-600 dark:checked:border-transparent cursor-pointer">
<label for="not-robot" class="text-lg text-gray-700 dark:text-gray-200 select-none cursor-pointer">I'm not a robot</label>
</div>
<!-- Verification Content Placeholder -->
<div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 space-y-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">
Please click the images containing a
<strong class="font-medium text-gray-700 dark:text-gray-200">traffic light</strong>.
Click verify once there are none left.
</p>
<div class="grid grid-cols-3 gap-2">
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/101/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/102/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/103/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/104/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/105/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
<button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
<img src="https://picsum.photos/id/106/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
<svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</button>
</div>
<div class="flex justify-end pt-2">
<button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
Verify
</button>
</div>
</div>
</div>
<!-- CAPTCHA Footer - reCAPTCHA branding placeholder -->
<div class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center space-x-1">
<svg class="h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-3.5-3.5L7 12l2-2 4 4 6-6 1.5 1.5L10 17z"/>
</svg>
<span>reCAPTCHA</span>
</div>
<div class="text-right">
<a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy</a>
<span> - </span>
<a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms</a>
</div>
</div>
</div>
</div>Composants associés
Composant CAPTCHA
Un composant CAPTCHA de style Material Design pour améliorer la sécurité d’un site Web de portfolio, avec un thème sombre et un design réactif avec Tailwind CSS.
Composant CAPTCHA
Un composant CAPTCHA simple avec une conception en niveaux de gris en mode sombre, optimisé pour la lisibilité sur les blogs et les sites de contenu.
Composant CAPTCHA - Brutalisme Vibrant Modéré
Un composant CAPTCHA brutaliste pour un tableau de bord aux couleurs vives et à la complexité modérée.