Composant CAPTCHA
Un composant CAPTCHA de style Material Design pour améliorer la sécurité d’un site Web de portfolio, avec un thème sombre et un design réactif avec Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" />
<input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400">
</div>
<div class="flex flex-col items-center mb-4">
<p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p>
<div class="grid grid-cols-2 gap-2 mt-2">
<img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
</div>
</div>
<button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button>
<div class="flex items-center justify-between mt-4">
<p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700">
</div>
</div>
</div>Composants associés
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.
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.
Retro_Captcha_Component
Un composant CAPTCHA de style rétro/vintage aux tons océan/bleu, conçu pour les sites de conseil/services. Dispose d’une interface complexe avec une image déformée, un défi audio et un champ de saisie.