CAPTCHA vintage retrò per i social media
Un componente CAPTCHA retrò-vintage per i social media, con colori vivaci, complessità moderata, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<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>
Componenti correlati
Componente CAPTCHA
Un componente CAPTCHA con un design in modalità oscura che utilizza Tailwind CSS. È reattivo e supporta temi scuri senza JavaScript, utilizzando solo CSS.
Componente CAPTCHA di progettazione dei materiali
Un componente CAPTCHA reattivo con i principi del Material Design, incluso il supporto del tema scuro.
Componente CAPTCHA Glassmorphism
Un semplice componente CAPTCHA con uno stile di progettazione glassmorphism. Ideale per i siti Web di e-commerce, presenta un effetto traslucido simile al vetro smerigliato, supporto per la modalità scura e una combinazione di colori in scala di grigi.