Retro Vintage CAPTCHA pour les médias sociaux
Un composant CAPTCHA rétro-vintage pour les médias sociaux, avec des couleurs vives, une complexité modérée, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
<!-- CAPTCHA Image/Challenge Area -->
<div class="relative mb-6">
<img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
<div class="absolute inset-0 bg-black opacity-25"></div>
<div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
kS7p#aG9
</div>
</div>
<!-- Input Field -->
<div class="mb-6">
<label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
Enter the characters you see:
</label>
<input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
</div>
<!-- Reload and Audio Buttons -->
<div class="flex justify-between mb-6">
<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Reload
</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Audio
</button>
</div>
<!-- Submit Button -->
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
Verify
</button>
</div>
</div>
Composants associés
Composant CAPTCHA
Un composant CAPTCHA réactif inspiré de la conception matérielle avec prise en charge du mode sombre, à l’aide de Tailwind CSS.
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.
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.