Composant CAPTCHA de conception matérielle
Un composant CAPTCHA réactif conçu selon les principes de Material Design, y compris la prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
<div class="mt-4 mb-6">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
</div>
<div class="flex items-center justify-between w-full">
<input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
<button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
</div>
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
<p>If you can't read the text, refresh to get a new image.</p>
</div>
</div>
Composants associés
Retro Vintage CAPTCHA pour les médias sociaux
Un composant CAPTCHA rétro-vintage pour les médias sociaux, avec des couleurs vives, une complexité modérée, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant CAPTCHA
Composant CAPTCHA réactif avec micro-interactions, prise en charge du thème sombre et images d’espace réservé aléatoires.
Composant CAPTCHA
Un composant CAPTCHA avec une conception en mode sombre à l’aide de Tailwind CSS. Il est réactif et prend en charge les thèmes sombres sans JavaScript, en utilisant uniquement CSS.