Componente de autenticación de dos factores
Un componente de autenticación de dos factores receptivo con elementos de diseño 3D y combinación de colores triádica, adecuado para un blog o un sitio de contenido. Incluye soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
<div class="flex justify-center space-x-3 mb-6">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
<input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
<p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
</div>
</div>Componentes relacionados
Componente de autenticación de dos factores
Un componente de autenticación de dos factores minimalista con soporte para temas oscuros mediante Tailwind CSS.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores con un diseño vibrante y simple. Cuenta con microinteracciones como animaciones sutiles de botones y transiciones de campos de entrada. Responsivo con soporte para modo oscuro. Diseñado para carteras.
Componente de autenticación de dos factores
Un componente de autenticación de dos factores diseñado con microinteracciones atractivas y una combinación de colores complementaria. Es sensible y admite el modo oscuro, adecuado para mostrar trabajos o productos en un portafolio.