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 di progettazione dei materiali
Un componente CAPTCHA reattivo con i principi del Material Design, incluso il supporto del tema scuro.
CAPTCHA vintage retrò per i social media
Un componente CAPTCHA retrò-vintage per i social media, con colori vivaci, complessità moderata, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.
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.