Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs minimaliste avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered email.</p>
<div class="flex justify-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/men/5.jpg" alt="avatar">
</div>
<div class="mb-4">
<input type="text" placeholder="Enter Code" class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
</div>
<div class="flex justify-between items-center mb-4">
<button class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-400 transition duration-300">Verify</button>
</div>
<div class="text-center">
<p class="text-gray-600 dark:text-gray-400">Didn't receive the code? <a href="#" class="text-blue-500 hover:underline">Resend</a></p>
</div>
</div>
</div>Composants associés
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 un style skeuomorphique, adapté aux applications de commerce électronique, utilisant un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il présente un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.