Componente CAPTCHA de neumorfismo
Un componente CAPTCHA complejo y responsivo diseñado en un estilo neumórfico para sitios de comercio electrónico, con soporte para temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">We are not robots!</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">Please complete the CAPTCHA to continue.</p>
<div class="flex flex-col mb-4">
<img src="https://picsum.photos/200/100?random=1" alt="Random" class="rounded-lg shadow-inner mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">Select all images with cars</span>
</div>
<div class="grid grid-cols-2 gap-2 mb-4">
<img src="https://picsum.photos/200/200?random=2" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 1">
<img src="https://picsum.photos/200/200?random=3" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 2">
<img src="https://picsum.photos/200/200?random=4" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 3">
<img src="https://picsum.photos/200/200?random=5" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 4">
</div>
<div class="flex flex-col mb-4">
<label class="text-sm text-gray-600 dark:text-gray-300 mb-2">Enter the text you see:</label>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 shadow-inner">
<input type="text" class="w-full bg-transparent outline-none text-gray-800 dark:text-gray-100" placeholder="Type here...">
</div>
</div>
<div>
<button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg shadow">Verify</button>
</div>
</div>
</div>Componentes relacionados
Componente CAPTCHA de Material Design
Un componente CAPTCHA responsivo diseñado con los principios de Material Design, incluida la compatibilidad con 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.
Componente CAPTCHA
Un componente CAPTCHA de estilo Glassmorphism con un esquema de color triádico, adecuado para plataformas de redes sociales. Presenta elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, con una complejidad media y algunas características interactivas. El diseño es responsivo e incluye soporte para modo oscuro.