Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple conçu avec le style glassmorphism, adapté aux plateformes de commerce électronique. Il dispose d’une palette de couleurs monochromatiques et est réactif avec la prise en charge du mode sombre.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
<div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
<p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
<input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
</div>
</div>
</body>
</html>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs réactif conçu en mode sombre à l’aide de couleurs en niveaux de gris, adapté à la consommation de blogs ou de contenu.
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.
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.