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 - 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.
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
Un composant CAPTCHA minimaliste/plat pour la présentation de portefeuille, réactif avec prise en charge du mode sombre.