Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori reattivo con elementi di design 3D e combinazione di colori triadici, adatto per un blog o un sito di contenuti. Include il supporto per la modalità oscura.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
<div class="flex justify-center space-x-3 mb-6">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
<p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
</div>
</div>Componenti correlati
Autenticazione a due fattori
Componente di autenticazione a due fattori con design brutalista, combinazione di colori complementari e complessità moderata per i social media, reattivo con supporto per temi scuri.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori semplice e reattivo con un design ispirato alla carta/stampa, combinazione di colori in bianco e nero con un accento luminoso, adatto per piattaforme di forum/community. Include il supporto per la modalità oscura.
Componente di autenticazione a due fattori
Un componente minimalista di autenticazione a due fattori progettato per un portfolio con una combinazione di colori triadica. È dotato di un'interfaccia pulita e interattiva che supporta la modalità oscura, costruita utilizzando Tailwind CSS.