Composant d’authentification à deux facteurs
Une conception simple et propre du composant d’authentification à deux facteurs utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
<div class="mb-4">
<input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
<div class="flex items-center justify-between mt-6">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
</div>
<div class="flex items-center justify-center mt-6">
<img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
</div>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu avec des micro-interactions attrayantes et une palette de couleurs complémentaires. Il est réactif et prend en charge le mode sombre, adapté à la présentation de travaux ou de produits dans un portfolio.
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.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs minimaliste conçu pour un portefeuille avec une palette de couleurs triadique. Il dispose d’une interface propre et interactive prenant en charge le mode sombre, construite à l’aide de Tailwind CSS.