Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs conçu avec des micro-interactions et une palette de couleurs pastel, adapté à la présentation de travaux ou de produits dans un portfolio. Le composant comprend plusieurs éléments interactifs et un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
<input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
</div>
<button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
</form>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
</div>
</div>
<div class="mt-6 flex justify-center space-x-4">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif conçu pour les interfaces de médias sociaux avec un style de conception 3D et une palette de couleurs en niveaux de gris.
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif avec des éléments de conception 3D et une palette de couleurs triadiques, adapté à un blog ou à un site de contenu. Inclut la prise en charge du mode sombre.
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.