Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori reattivo progettato in modalità oscura utilizzando colori in scala di grigi, adatto per il consumo di blog o contenuti.
Codice HTML
<div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
<p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
<form class="space-y-6">
<div>
<label class="block text-gray-300 mb-1" for="email">Email Address</label>
<input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-gray-300 mb-1" for="code">Verification Code</label>
<input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
</div>
<button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
</form>
<div class="text-center mt-4">
<a href="#" class="text-gray-400 hover:underline">Resend Code</a>
</div>
</div>
</div>Componenti correlati
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.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori scheumorfico per i social media con colori complementari, interfaccia utente complessa, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori con un design vivace e semplice. Presenta microinterazioni come sottili animazioni dei pulsanti e transizioni del campo di input. Reattivo con supporto per la modalità oscura. Progettato per i portafogli.