Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs réactif avec un design brutaliste, une palette de couleurs triadique et la prise en charge du thème sombre à des fins de tableau de bord.
HTML Code
<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>Composants associés
Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs rétro/vintage avec design réactif et prise en charge du mode sombre.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif utilisant Tailwind CSS avec prise en charge du thème sombre. Dispose d’un design minimaliste / plat, d’une palette de couleurs monochromatiques, d’une mise en page complexe avec plusieurs éléments interactifs adaptés au commerce électronique.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu dans un design brutaliste à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.