Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori reattivo progettato con neumorfismo in una combinazione di colori vivaci, adatto per siti Web aziendali e che supporta la modalità oscura con Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-4">Secure your account with an additional layer of protection.</p>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
<input type="text" id="phone" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter your phone number" />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
<input type="text" id="code" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter the authentication code" />
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Verify</button>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-400">Or</p>
<a href="#" class="text-blue-500 hover:underline">Use an Authenticator App</a>
</div>
<div class="mt-6">
<img src="https://picsum.photos/200/100" alt="Random image" class="rounded-lg shadow-md dark:shadow-lg" />
</div>
</div>
</div>Componenti correlati
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori semplice e reattivo per l'e-commerce, con un design Skeuomorphic, una combinazione di colori triadici e il supporto per il tema scuro.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori con un design brutalista che utilizza Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Componente di autenticazione a due fattori
Un componente di autenticazione a due fattori (2FA) complesso e reattivo progettato per applicazioni finanziarie/bancarie, dotato di un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Include campi di input per un codice, un'opzione di reinvio e una spiegazione della 2FA.