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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
<h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>
<div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
<img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
<div class="flex-grow">
<p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
<div class="grid grid-cols-3 gap-2">
<img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
<img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
</div>
</div>
</div>
<div class="flex items-center text-white dark:text-gray-200 mb-6">
<input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
<label for="robot-check" class="text-sm select-none">I'm not a robot</label>
</div>
<button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Verify
</button>
<p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
</div>
</div>Composants associés
Composant CAPTCHA rétro/vintage
Un composant CAPTCHA de style rétro conçu pour les interfaces de médias sociaux, avec des couleurs vives et une mise en page complexe avec un design réactif et une prise en charge du thème sombre.
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 Glassmorphism
Un composant CAPTCHA simple et réactif de style glassmorphism avec une palette de couleurs en niveaux de gris et une prise en charge du mode sombre, adapté aux blogs ou aux sites de contenu.