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 design semplice e pulito del componente di autenticazione a due fattori 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 reattivo che utilizza Tailwind CSS con supporto per il tema scuro. Presenta un design minimalista/piatto, combinazione di colori monocromatica, layout complesso con più elementi interattivi adatti all'e-commerce.
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.