Composant d’authentification à deux facteurs
Composant d’authentification à deux facteurs de style Art déco, avec des motifs géométriques et une palette de couleurs vert forêt, adapté aux applications de médias sociaux. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
<div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
<!-- Art Deco Top Border -->
<div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
</div>
<!-- Art Deco Bottom Border -->
<div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
<div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
</div>
<div class="text-center mt-8 mb-4">
<svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
</svg>
<h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
<p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
</div>
<form class="space-y-6">
<div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
<div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
<input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
<svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
</svg>
Verify Code
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
</p>
<p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
<a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
</p>
</div>
</div>
</div>
<style>
/* This is an optional style for better visual of Art Deco inputs,
though the core design is pure Tailwind */
.ArtDecoInput {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
/* This clip-path attempts a more geometric shape;
Adjust values for desired effect. Pure CSS for complex shapes is limited. */
/* For simpler rounded squares, remove clip-path */
}
.dark .ArtDecoInput {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
}
</style>Composants associés
Composant d’authentification à deux facteurs
Un composant d’authentification à deux facteurs (2FA) complexe et réactif conçu avec des dégradés de couleurs océan/bleu et des transitions fluides, adapté aux sites d’information et aux médias. Comprend la prise en charge du mode sombre et une interface interactive riche.
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 conçu avec Neumorphism dans une palette de couleurs vives, adapté aux sites Web d’entreprise et prenant en charge le mode sombre avec Tailwind CSS.