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 skeuomorphe
Un composant CAPTCHA skeuomorphe conçu pour les sites Web d’événements/conférences, doté d’une palette de couleurs triadique et d’une prise en charge du mode sombre. Il imite des éléments numériques du monde réel avec des boutons interactifs.
Composant CAPTCHA
Un composant CAPTCHA minimaliste/plat pour la présentation de portefeuille, réactif avec prise en charge du mode sombre.
Monospace_Developer_CAPTCHA_Component
Un composant CAPTCHA complexe, inspiré du code, avec une police monospace, une esthétique terminale et une palette de couleurs complémentaires, conçu pour un portfolio afin de présenter le travail. Entièrement réactif avec prise en charge du mode sombre.