Composant CAPTCHA
Un composant CAPTCHA de style 3D conçu pour les tableaux de bord avec des couleurs vives et un design réactif, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
<div class="w-full max-w-xs">
<div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">
<img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
<p class="ml-4">Check all images with a car</p>
</div>
<div class="grid grid-cols-3 gap-2 my-4">
<img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
<img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
<img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
<img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
<img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
<img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
</div>
<button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
</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
Un composant CAPTCHA réactif inspiré de la conception matérielle avec prise en charge du mode sombre, à l’aide de Tailwind CSS.
Composant CAPTCHA
Un composant CAPTCHA simple, propre et sur le thème du monospace pour les sites Web d’alimentation/restaurant, doté d’une palette de couleurs en niveaux de gris et d’une réactivité totale avec prise en charge du mode sombre.