Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif pour le commerce électronique, avec un design skeuomorphique, une palette de couleurs triadique et une prise en charge du thème sombre.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
<div class="text-center mb-6">
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
</div>
<div class="flex justify-center space-x-3 mb-6">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
<input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
<input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
<input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
</div>
<button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
Verify Code
</button>
<p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
</p>
</div>
</div>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs simple et réactif conçu dans un style rétro avec des tons de terre, adapté aux interfaces de médias sociaux.
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 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.