Composant CAPTCHA
Un composant CAPTCHA skeuomorphe conçu pour les interfaces de médias sociaux avec une palette de couleurs triadique, avec plusieurs éléments interactifs et la prise en charge du thème sombre.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
<h2 class="text-2xl font-bold text-white mb-4">Prove You're Not a Robot</h2>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Random Image" class="rounded-lg shadow-lg">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 mb-2">Select all images containing:</p>
<div class="grid grid-cols-2 gap-2">
<img src="https://picsum.photos/100?random=1" alt="Image 1" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
<img src="https://picsum.photos/100?random=2" alt="Image 2" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
<img src="https://picsum.photos/100?random=3" alt="Image 3" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
<img src="https://picsum.photos/100?random=4" alt="Image 4" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
</div>
</div>
</div>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-full shadow-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
Verify
</button>
<p class="mt-2 text-gray-400 dark:text-gray-500 text-sm">If you are having trouble, refresh the challenge.</p>
</div>
Composants associés
Composant CAPTCHA
Un composant CAPTCHA minimaliste/plat pour la présentation de portefeuille, réactif avec prise en charge du mode sombre.
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.