Composant CAPTCHA brutaliste
Un composant CAPTCHA brut et gras conçu avec une palette de couleurs en niveaux de gris, adapté à une interface de tableau de bord, y compris des fonctionnalités interactives pour la vérification de l’utilisateur.
HTML Code
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Please Verify You're Human</h2>
<img src="https://picsum.photos/400/200" alt="Random Image" class="mb-4 rounded-lg shadow-md" />
<p class="text-gray-700 dark:text-gray-300 mb-4">Select all images with traffic lights:</p>
<div class="grid grid-cols-2 gap-4 mb-4">
<img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=3" alt="Image 3" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
<img src="https://picsum.photos/200/100?random=4" alt="Image 4" class="rounded-lg border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:border-gray-900 dark:hover:border-gray-100" />
</div>
<button class="bg-gray-900 hover:bg-gray-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-4 rounded transition duration-200">Verify</button>
<div class="mt-4">
<p class="text-gray-500 dark:text-gray-400 text-sm">Need help? <a href="#" class="text-blue-500 dark:text-blue-300 underline">Contact Support</a></p>
</div>
</div>Composants associés
Composant CAPTCHA skeuomorphe
Un composant CAPTCHA moyennement complexe et skeuomorphe conçu avec des tons bleus d’entreprise, adapté aux systèmes de réservation et de réservation. Dispose d’un design réactif et d’une prise en charge du mode sombre, imitant les éléments numériques du monde réel.
Composant CAPTCHA
Un composant CAPTCHA skeuomorphe conçu pour les interfaces de médias sociaux avec une palette de couleurs triadique, avec plusieurs éléments interactifs et la prise en charge du thème sombre.
Composant CAPTCHA
Un composant CAPTCHA avec une conception en mode sombre à l’aide de Tailwind CSS. Il est réactif et prend en charge les thèmes sombres sans JavaScript, en utilisant uniquement CSS.