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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 max-w-lg w-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
<div class="flex flex-col items-center mb-4">
<img src="https://picsum.photos/200/100" alt="Random" class="rounded-lg shadow-md mb-3">
<span class="text-gray-700 dark:text-gray-300">Please select the images with traffic lights.</span>
</div>
<div class="grid grid-cols-2 gap-2">
<img src="https://picsum.photos/200/100?random=1" alt="Option 1" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
<img src="https://picsum.photos/200/100?random=2" alt="Option 2" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
<img src="https://picsum.photos/200/100?random=3" alt="Option 3" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
<img src="https://picsum.photos/200/100?random=4" alt="Option 4" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Verify</button>
</div>
</div>Composants associés
Glassmorphism CAPTCHA Component
Un composant CAPTCHA simple avec un style de design glassmorphism. Idéal pour les sites Web de commerce électronique, avec un effet translucide semblable à du verre givré, la prise en charge du mode sombre et une palette de couleurs en niveaux de gris.
Cyberpunk_Weather_CAPTCHA_Component
Un composant CAPTCHA complexe, sur le thème du cyberpunk, pour les données météorologiques/climatiques, avec des tons océan/bleus néons futuristes, des arrière-plans sombres et de multiples éléments interactifs. Entièrement réactif avec prise en charge du mode sombre.
Composant CAPTCHA brutaliste
Un composant CAPTCHA brut et gras conçu avec une palette de couleurs en niveaux de gris, adapté à une interface de tableau de bord, y compris des fonctionnalités interactives pour la vérification de l’utilisateur.