Componente di autenticazione a due fattori
Un design semplice e pulito del componente di autenticazione a due fattori che utilizza Tailwind CSS con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
<div class="mb-4">
<input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
<div class="flex items-center justify-between mt-6">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
</div>
<div class="flex items-center justify-center mt-6">
<img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
</div>
</div>
</div>Componenti correlati
Componente di autenticazione a due fattori
Un semplice componente di autenticazione a due fattori a tema industriale con un accento arcobaleno sfumato, adatto per siti Web aziendali/aziendali. Offre reattività e supporto per la modalità scura.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori progettato con microinterazioni e una combinazione di colori pastello, adatto per mostrare lavori o prodotti in un portfolio. Il componente include più elementi interattivi e un design reattivo con supporto per il tema scuro.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori complesso, reattivo e a tema retrò per applicazioni di social media, con una modalità oscura e una combinazione di colori analoga utilizzando Tailwind CSS. Include più elementi interattivi e utilizza immagini da picsum.photos e randomuser.me.