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
Composant CAPTCHA - Aquarelle/Artistique
Un composant CAPTCHA simple et réactif avec un design aquarelle/artistique, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux applications industrielles/manufacturières.
Composant CAPTCHA
Composant CAPTCHA réactif dans le style rétro/vintage avec palette de couleurs pastel et prise en charge du mode sombre.
Composant CAPTCHA
Un composant CAPTCHA réactif inspiré de la conception matérielle avec prise en charge du mode sombre, à l’aide de Tailwind CSS.