Componente de componentes de autenticación
Un componente de autenticación complejo diseñado para aplicaciones industriales/de fabricación, con una estética monoespaciada/de desarrollador con tonos de color océano/azul. Incluye formularios de inicio de sesión, registro y restablecimiento de contraseña, totalmente receptivos con soporte para modo oscuro.
Código HTML
<div class="min-h-screen bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 flex items-center justify-center p-4 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 font-mono text-white text-sm">
<div class="w-full max-w-4xl bg-blue-900/70 backdrop-blur-sm rounded-lg shadow-2xl overflow-hidden md:flex dark:bg-gray-900/70 p-6 md:p-8 border border-blue-700 dark:border-gray-700 animate-fade-in">
<!-- Image Section (Left on Desktop, Top on Mobile) -->
<div class="hidden md:flex md:w-1/2 bg-blue-950 border-r border-blue-700 dark:bg-gray-950 dark:border-gray-700 flex flex-col justify-between p-6 animate-slide-in-left">
<div>
<h2 class="text-3xl font-bold mb-4 text-blue-300 dark:text-gray-300">Industrial Command Center</h2>
<p class="text-blue-200 dark:text-gray-400 leading-relaxed">
Access your manufacturing control systems. Securely manage production lines, monitor sensor data, and optimize operational efficiency.
</p>
<ul class="mt-6 space-y-2 text-blue-200 dark:text-gray-400">
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Real-time Data Analytics</li>
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Secure Machine Interfacing</li>
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Global Supply Chain Management</li>
</ul>
</div>
<div class="mt-8">
<img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial machinery" class="rounded-md shadow-lg border border-blue-700 dark:border-gray-700 opacity-80 hover:opacity-100 transition-opacity duration-300">
</div>
</div>
<!-- Forms Section (Right on Desktop, Bottom on Mobile) -->
<div class="w-full md:w-1/2 p-6 md:px-10 py-8 flex flex-col justify-center animate-slide-in-right">
<div x-data="{ currentTab: 'login' }" class="w-full">
<div class="flex mb-6 border-b border-blue-700 dark:border-gray-700">
<button @click="currentTab = 'login'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'login', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'login'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Login
</button>
<button @click="currentTab = 'signup'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'signup', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'signup'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Sign Up
</button>
<button @click="currentTab = 'reset'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'reset', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'reset'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Reset
</button>
</div>
<!-- Login Form -->
<form x-show="currentTab === 'login'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">System Access</h2>
<div>
<label for="login-username" class="block text-blue-200 dark:text-gray-400 mb-2">Username</label>
<input type="text" id="login-username" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="login-password" class="block text-blue-200 dark:text-gray-400 mb-2">Password</label>
<input type="password" id="login-password" placeholder="********" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-500 bg-blue-800 border-blue-600 rounded focus:ring-blue-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<label for="remember-me" class="ml-2 block text-blue-200 dark:text-gray-400 cursor-pointer">Remember me</label>
</div>
<a href="#" @click.prevent="currentTab = 'reset'" class="text-blue-300 hover:text-blue-200 dark:text-gray-400 dark:hover:text-gray-300 transition-colors duration-200">Forgot password?</a>
</div>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Login To Terminal →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</form>
<!-- Sign Up Form -->
<form x-show="currentTab === 'signup'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">New User Registration</h2>
<div>
<label for="signup-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
<input type="email" id="signup-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-username" class="block text-blue-200 dark:text-gray-400 mb-2">Desired Username</label>
<input type="text" id="signup-username" placeholder="new.user" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-password" class="block text-blue-200 dark:text-gray-400 mb-2">Create Password</label>
<input type="password" id="signup-password" placeholder="Min 8 characters" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-confirm-password" class="block text-blue-200 dark:text-gray-400 mb-2">Confirm Password</label>
<input type="password" id="signup-confirm-password" placeholder="Repeat password" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Register Account →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</form>
<!-- Password Reset Form -->
<form x-show="currentTab === 'reset'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">Password Recovery</h2>
<div>
<label for="reset-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
<input type="email" id="reset-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<p class="text-blue-200 dark:text-gray-400 text-xs">Enter your registered email address and we'll send you instructions to reset your password. Check your spam folder.</p>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Send Reset Link →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
<button @click.prevent="currentTab = 'login'" class="w-full border border-blue-600 hover:border-blue-500 text-blue-300 hover:text-blue-200 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600">
← Back to Login
</button>
</form>
</div>
</div>
</div>
<!-- Alpine JS for Tab Switching -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('authTabs', () => ({
currentTab: 'login',
}));
});
</script>
<!-- Tailwind Typography and Custom Animations (Optional, if not already in config) -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
</style>
</div>Componentes relacionados
Componente de componentes de autenticación
Un componente de autenticación de modo oscuro receptivo para paneles, que utiliza tonos tierra para una estética natural.
Componente de autenticación skeuomórfica
Componente de autenticación esqueuomórfica con combinación de colores triádica, complejidad moderada, diseño receptivo y compatibilidad con el modo oscuro. Diseñado para un propósito de cartera. Utiliza Tailwind CSS.
Componente de autenticación
Un componente de autenticación responsivo diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises adecuado para sitios web comerciales / corporativos.