Glassmorphism CAPTCHA Component
Un composant CAPTCHA simple avec un style de design glassmorphism. Idéal pour les sites Web de commerce électronique, avec un effet translucide semblable à du verre givré, la prise en charge du mode sombre et une palette de couleurs en niveaux de gris.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
</div>
<div class="flex justify-center items-center">
<input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
<button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
</div>
<div class="flex justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
</div>
</div>
</div>Composants associés
Composant CAPTCHA brutaliste
Un composant CAPTCHA conçu dans un style brutaliste, avec un contraste élevé, des mises en page inhabituelles et des effets réactifs avec prise en charge du thème sombre.
Composant CAPTCHA complexe
Un composant CAPTCHA complexe pour les applications de médias sociaux avec un mode sombre et des couleurs vives.
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.