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 conçu selon les principes de Material Design et de Tailwind CSS, adapté aux sites Web de commerce électronique, avec prise en charge du thème sombre et conception réactive.
Glassmorphism CAPTCHA Component
Un composant CAPTCHA simple avec un style de design glassmorphism. Idéal pour les sites Web de commerce électronique, avec un effet translucide semblable à du verre givré, la prise en charge du mode sombre et une palette de couleurs en niveaux de gris.
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.