Componente CAPTCHA de Material Design
Un componente CAPTCHA responsivo diseñado con los principios de Material Design, incluida la compatibilidad con temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
<div class="mt-4 mb-6">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
</div>
<div class="flex items-center justify-between w-full">
<input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
<button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
</div>
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
<p>If you can't read the text, refresh to get a new image.</p>
</div>
</div>Componentes relacionados
Componente CAPTCHA
Un componente CAPTCHA inspirado en Material Design con una combinación de colores monocromática, adecuado para blogs o sitios de contenido. Cuenta con una casilla de verificación, un texto "No soy un robot" similar a reCAPTCHA y un área de verificación de imagen de marcador de posición. Totalmente responsivo y compatible con el modo oscuro.
Componente CAPTCHA de Glassmorphism
Un componente CAPTCHA simple con un estilo de diseño de glassmorphism. Ideal para sitios web de comercio electrónico, con un efecto translúcido similar al vidrio esmerilado, compatibilidad con el modo oscuro y una combinación de colores en escala de grises.
Componente CAPTCHA
Un componente CAPTCHA complejo, inspirado en el código, con una combinación de colores dulces/dulces, diseñado para interfaces de redes sociales. Cuenta con un diseño responsivo, compatibilidad con el modo oscuro y elementos interactivos.