Componente CAPTCHA retrò
Un componente CAPTCHA con un'estetica Retro/Vintage e colori pastello, progettato per dashboard di visualizzazione dei dati con supporto per la modalità scura.
Codice HTML
<div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
<p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
<img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md">
</div>
<div class="flex flex-col items-center mt-6">
<label class="flex items-center mb-4">
<input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
<span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
</label>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>
Componenti correlati
Componente CAPTCHA
Un componente CAPTCHA complesso e ispirato al codice con una combinazione di colori caramelle/dolci, progettato per le interfacce dei social media. Presenta un layout reattivo, supporto per la modalità oscura ed elementi interattivi.
Componente CAPTCHA
Un componente CAPTCHA con un design in modalità oscura che utilizza Tailwind CSS. È reattivo e supporta temi scuri senza JavaScript, utilizzando solo CSS.
Componente CAPTCHA
Un componente CAPTCHA con uno stile che utilizza i principi di Material Design e Tailwind CSS, adatto per siti di e-commerce, con supporto per temi scuri e design reattivo.