Composant CAPTCHA de neumorphisme
Un composant CAPTCHA réactif et complexe conçu dans un style neumorphique pour les sites de commerce électronique, avec une prise en charge du thème sombre, à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
CAPTCHA minimaliste
Un composant CAPTCHA réactif avec prise en charge du mode sombre, avec un design minimaliste avec des couleurs pastel. Comprend une simple case à cocher et un espace réservé pour le texte.
Composant CAPTCHA vintage rétro
Un composant CAPTCHA simple conçu avec une esthétique rétro nostalgique, une palette de couleurs vives, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.
Composant CAPTCHA
Un composant CAPTCHA de style Glassmorphism avec une palette de couleurs triadique, adapté aux plateformes de médias sociaux. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, avec une complexité moyenne et quelques fonctionnalités interactives. Le design est réactif et inclut la prise en charge du mode sombre.