Composant CAPTCHA
Un composant CAPTCHA inspiré du Material Design avec une palette de couleurs vives, conçu pour les applications de médias sociaux. Entièrement réactif avec prise en charge du 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 tracking-wide">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl sm:p-5 p-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white capitalize">I'm not a robot</h2>
<svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="grid grid-cols-3 gap-3 mb-6">
<img src="https://picsum.photos/id/237/100/100" alt="Image Grid 1" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/238/100/100" alt="Image Grid 2" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/239/100/100" alt="Image Grid 3" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/240/100/100" alt="Image Grid 4" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/241/100/100" alt="Image Grid 5" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/242/100/100" alt="Image Grid 6" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/243/100/100" alt="Image Grid 7" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/244/100/100" alt="Image Grid 8" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/245/100/100" alt="Image Grid 9" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
</div>
<p class="mb-6 text-gray-600 dark:text-gray-300 text-sm md:text-base">Please select all squares with <span class="font-semibold text-indigo-700 dark:text-indigo-400">vehicles</span>.</p>
<div class="flex justify-end">
<button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
Verify
</button>
</div>
<div class="flex items-center justify-between text-xs mt-6 text-gray-500 dark:text-gray-400">
<a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Privacy</a>
<a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Terms</a>
</div>
</div>
</div>Composants associés
Composant CAPTCHA en mode sombre
Un composant CAPTCHA conçu pour l’interface utilisateur en mode sombre avec des effets réactifs et la prise en charge du thème sombre.
Composant Captcha Glassmorphism
Un composant CAPTCHA simple et réactif de style glassmorphism avec une palette de couleurs en niveaux de gris et une prise en charge du mode sombre, adapté aux blogs ou aux sites de contenu.
Glassmorphism CAPTCHA Component
Un composant CAPTCHA simple avec un style de design glassmorphism. Idéal pour les sites Web de commerce électronique, avec un effet translucide semblable à du verre givré, la prise en charge du mode sombre et une palette de couleurs en niveaux de gris.