Retro Vintage CAPTCHA For Social Media
A retro-vintage CAPTCHA component for social media, with vibrant colors, moderate complexity, responsiveness, and dark mode support using 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>
Related Components
Dark Mode CAPTCHA Component
A CAPTCHA component designed for dark mode UI featuring responsive effects and dark theme support.
Complex CAPTCHA Component
A complex CAPTCHA component for social media applications with dark mode and vibrant colors.
Material Design CAPTCHA Component
A responsive CAPTCHA component styled with Material Design principles, including dark theme support.