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 Retro Vintage CAPTCHA
Un componente CAPTCHA simple diseñado con una estética retro nostálgica, combinación de colores vibrantes, adecuado para sitios web comerciales y corporativos, con soporte para modo oscuro.
Componente CAPTCHA
Un componente CAPTCHA esqueuomórfico diseñado para interfaces de redes sociales con un esquema de color triádico, con múltiples elementos interactivos y soporte para temas oscuros.
Componente CAPTCHA
Un componente CAPTCHA con un diseño de modo oscuro que usa Tailwind CSS. Es responsivo y admite temas oscuros sin JavaScript, usando solo CSS.