Componente CAPTCHA
Un componente CAPTCHA semplice, pulito e a tema monospace per siti Web di cibo/ristoranti, caratterizzato da una combinazione di colori in scala di grigi e reattività completa con supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Componente CAPTCHA di neumorfismo
Un componente CAPTCHA reattivo e complesso progettato in uno stile neumorfico per siti di e-commerce, con supporto per temi scuri, utilizzando Tailwind CSS.
Retro_Candy_CAPTCHA_Component
Un componente CAPTCHA complesso, in stile retrò/vintage con una combinazione di colori caramelle/dolci, progettato per i sistemi di prenotazione e prenotazione. Presenta più elementi interattivi, layout completamente reattivo e supporto per la modalità oscura.
Componente CAPTCHA
Un componente CAPTCHA pulito e minimalista con uno stile di design tipografico svizzero/internazionale, con toni oceano/blu. Progettato per siti Web di eventi e conferenze, è reattivo e include il supporto per la modalità scura.