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
Composant CAPTCHA
Un composant CAPTCHA de style Glassmorphism avec une palette de couleurs triadique, adapté aux plateformes de médias sociaux. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, avec une complexité moyenne et quelques fonctionnalités interactives. Le design est réactif et inclut la prise en charge du mode sombre.
Composant CAPTCHA de neumorphisme
Un composant CAPTCHA réactif et complexe conçu dans un style neumorphique pour les sites de commerce électronique, avec une prise en charge du thème sombre, à l’aide de Tailwind CSS.