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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
<div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
<div class="grid grid-cols-2 gap-4 mt-6">
<div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
</div>
<div class="my-4">
<label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
<input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
</div>
<button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
</div>
</div>Componenti correlati
Componente CAPTCHA
Un componente CAPTCHA scheumorfico progettato per le interfacce dei social media con una combinazione di colori triadica, con più elementi interattivi e supporto per temi scuri.
Componente CAPTCHA
Un componente CAPTCHA in stile Glassmorphism con una combinazione di colori triadica, adatto per piattaforme di social media. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, con una complessità media e alcune funzioni interattive. Il design è reattivo e include il supporto per la modalità oscura.
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.