Composant CAPTCHA
Un composant CAPTCHA simple avec une conception en niveaux de gris en mode sombre, optimisé pour la lisibilité sur les blogs et les sites de contenu.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full border border-gray-700">
<h2 class="text-2xl font-bold text-white mb-6 text-center">Verify you are not a robot</h2>
<div class="flex items-center justify-between bg-gray-700 p-4 rounded-md mb-6">
<img src="https://picsum.photos/120/50?grayscale&blur=1" alt="CAPTCHA image" class="rounded">
<button class="bg-gray-600 text-white p-2 rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582m-15.356-2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582"></path></svg>
</button>
</div>
<div class="mb-6">
<input type="text" placeholder="Enter the text from the image" class="form-input w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent">
</div>
<button class="w-full bg-gray-600 text-white p-3 rounded-md font-semibold hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Submit
</button>
</div>
</div>
Composants associés
Composant CAPTCHA
Un composant CAPTCHA réactif inspiré de la conception matérielle avec prise en charge du mode sombre, à l’aide de Tailwind CSS.
Glassmorphism_CAPTCHA_Component_Forest_Green
Un composant CAPTCHA réactif de style glassmorphism avec une palette de couleurs vert forêt, adapté aux applications manufacturières/industrielles. Inclut la prise en charge du mode sombre.
Retro CAPTCHA
Un composant CAPTCHA réactif avec des tons de terre, une complexité modérée et un style rétro/vintage pour les sites Web d’entreprise, avec prise en charge du mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.