Composant CAPTCHA
Un composant CAPTCHA conçu selon les principes de Material Design et de Tailwind CSS, adapté aux sites Web de commerce électronique, avec prise en charge du thème sombre et conception réactive.
HTML Code
<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>Composants associés
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.
Composant Captcha minimaliste
Un composant CAPTCHA simple, réactif et minimaliste conçu pour les tableaux de bord, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.
Composant CAPTCHA - Organique/Inspiré de la nature (couleurs d’automne)
Un composant CAPTCHA complexe et réactif conçu avec un style organique, inspiré de la nature, utilisant des couleurs d’automne, adapté aux sites Web d’actualités et de journalisme. Comprend une prise en charge complète du mode sombre.