Componente CAPTCHA
Un componente CAPTCHA de estilo 3D diseñado para paneles con colores vibrantes y diseño receptivo, compatible con el modo oscuro.
Código 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>Componentes relacionados
Componente CAPTCHA de modo oscuro
Un componente CAPTCHA diseñado para la interfaz de usuario del modo oscuro con efectos responsivos y compatibilidad con temas oscuros.
CAPTCHA minimalista
Un componente CAPTCHA responsivo con soporte para modo oscuro, con un diseño minimalista con colores pastel. Incluye una casilla de verificación simple y un marcador de posición para texto.
Componente CAPTCHA brutalista
Un componente CAPTCHA crudo y audaz diseñado con un esquema de color en escala de grises, adecuado para una interfaz de tablero, que incluye funciones interactivas para la verificación del usuario.