Componente CAPTCHA
Un componente CAPTCHA in stile 3D progettato per cruscotti con colori vivaci e design reattivo, che supporta la modalità oscura.
Codice HTML
<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>
Componenti correlati
CAPTCHA minimalista
Un componente CAPTCHA reattivo con supporto per la modalità oscura, caratterizzato da un design minimalista con colori pastello. Include una semplice casella di controllo e un segnaposto per il testo.
Componente CAPTCHA retrò
Un componente CAPTCHA con un'estetica Retro/Vintage e colori pastello, progettato per dashboard di visualizzazione dei dati con supporto per la modalità scura.
Componente CAPTCHA complesso
Un componente CAPTCHA complesso per applicazioni di social media con modalità oscura e colori vivaci.