Composant CAPTCHA
Un composant CAPTCHA simple, propre et sur le thème du monospace pour les sites Web d’alimentation/restaurant, doté d’une palette de couleurs en niveaux de gris et d’une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
<div class="w-full max-w-sm rounded-lg shadow-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-6 space-y-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 text-center">
Verify You Are Human
</h2>
<p class="text-sm text-gray-700 dark:text-gray-300 text-center leading-relaxed">
To proceed, please select all images containing <span class="text-gray-900 dark:text-gray-100 font-semibold">burgers</span>.
</p>
<div class="grid grid-cols-3 gap-2">
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/1084/300/200" alt="Image 1" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/433/300/200" alt="Image 2" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/1069/300/200" alt="Image 3" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/228/300/200" alt="Image 4" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/111/300/200" alt="Image 5" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
<div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
<img src="https://picsum.photos/id/350/300/200" alt="Image 6" class="w-full h-24 object-cover">
<div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
<div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
</div>
</div>
</div>
<div class="flex items-center justify-between pt-4">
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v2m7 12h.582M20 20v-5h-.582m0 0a8.005 8.005 0 00-15.356-2L4 12V4"></path></svg>
<button class="text-sm hover:underline focus:outline-none">Reload</button>
</div>
<button class="px-5 py-2 bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-opacity-50">
Verify
</button>
</div>
</div>
</div>
</div>Composants associés
ArtDecoCaptchaComponent
Un composant CAPTCHA simple et réactif avec une esthétique Art Déco, utilisant des couleurs d’automne adaptées aux sites Web d’entreprise, avec prise en charge du mode sombre.
Composant CAPTCHA
Un composant CAPTCHA complexe, inspiré du code, avec une palette de couleurs bonbon/doux, conçu pour les interfaces de médias sociaux. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et d’éléments interactifs.
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.