Componente di autenticazione a due fattori
Componente di autenticazione a due fattori reattivo con design brutalista, combinazione di colori triadica e supporto del tema scuro per uno scopo di dashboard.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-black">
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 p-8 rounded-none shadow-2xl w-full max-w-md">
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white uppercase">Two-Factor Authentication</h2>
<p class="mb-6 text-gray-700 dark:text-gray-300">Please enter the code sent to your device.</p>
<div class="flex space-x-4 mb-6">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
<input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
</div>
<button class="w-full bg-red-500 dark:bg-red-700 text-white dark:text-black font-bold py-4 px-6 border-4 border-black dark:border-gray-700 rounded-none uppercase text-xl hover:bg-red-700 dark:hover:bg-red-600 transition duration-300">Verify Code</button>
<p class="mt-6 text-center text-sm text-gray-700 dark:text-gray-300"><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a> or <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Use another method</a></p>
</div>
</div>Componenti correlati
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 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 reattivo progettato con neumorfismo in una combinazione di colori vivaci, adatto per siti Web aziendali e che supporta la modalità oscura con Tailwind CSS.