Cyberpunk Login/Signup Form
A complex, responsive login/signup component with a cyberpunk aesthetic, featuring dark backgrounds, neon gradients, and interactive elements, designed for educational platforms.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-200 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-950 font-mono">
<div class="relative w-full max-w-md mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 opacity-20 animate-pulse-slow dark:opacity-30"></div>
<div class="absolute inset-0 border-2 rounded-xl border-transparent glow-border dark:border-transparent"></div>
<div class="relative p-8 backdrop-blur-sm bg-gray-900/80 dark:bg-gray-950/80 rounded-xl">
<h2 class="text-4xl font-bold mb-6 text-center tracking-wider neon-glow-text dark:neon-glow-text-darker transition-colors duration-300">
<span id="form-title">ACCESS_NEURAL_NET</span>
</h2>
<div class="flex justify-center mb-6">
<button id="login-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button active-tab-button">
LOGIN
</button>
<button id="signup-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button">
REGISTER
</button>
</div>
<form id="login-form" class="space-y-6">
<div>
<label for="login-email" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// DATA STREAM: EMAIL</label>
<input type="email" id="login-email" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="[email protected]">
</div>
<div>
<label for="login-password" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// ENCRYPTED KEY: PASSWORD</label>
<input type="password" id="login-password" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="••••••••">
</div>
<button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 dark:focus:ring-red-400">
INITIATE_CONNECTION
</button>
<p class="text-center text-sm text-gray-400 mt-4">
<a href="#" class="text-purple-400 hover:underline transition-colors duration-300 neon-text-hover">FORGOT_ACCESS_CODE?</a>
</p>
</form>
<form id="signup-form" class="space-y-6 hidden">
<div>
<label for="signup-username" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// USER_ALIAS</label>
<input type="text" id="signup-username" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="cyber_nomad_77">
</div>
<div>
<label for="signup-email" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// DATA STREAM: EMAIL</label>
<input type="email" id="signup-email" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="[email protected]">
</div>
<div>
<label for="signup-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// ENCRYPTED KEY: PASSWORD</label>
<input type="password" id="signup-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
</div>
<div>
<label for="signup-confirm-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// CONFIRM_ENCRYPTED_KEY</label>
<input type="password" id="signup-confirm-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
</div>
<button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 dark:focus:ring-green-400">
ESTABLISH_NEW_PROTOCOL
</button>
</form>
<div class="mt-8 text-center">
<p class="text-sm text-gray-500 mb-4">// ALTERNATIVE_AUTHENTICATION_METHODS</p>
<div class="flex justify-center space-x-4">
<button class="p-3 rounded-full bg-gray-800 border border-blue-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
<svg class="w-6 h-6 text-blue-400 dark:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H9.75v-6.75H7.5V9h2.25V7.5c0-2.25 1.5-3.75 4.125-3.75h3v2.25h-2.25c-.75 0-1.5.75-1.5 1.5V9h3.75l-.75 3h-3V18z" />
</svg>
</button>
<button class="p-3 rounded-full bg-gray-800 border border-red-700 hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
<svg class="w-6 h-6 text-red-400 dark:text-red-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.012 21.036c-5.07-1.127-8.913-5.748-8.913-11.036V12.01c0-5.06 3.967-9.28 9.02-9.28 4.975 0 8.98 4.093 8.98 9.17 0 4.8-3.743 8.877-8.966 9.136-.02-.007-.04-.017-.063-.02l-.004-.002zm-5.086-13.064h9.946v1.921H6.92V7.972zm0 2.472h9.946V12.36H6.92v-1.916zm0 2.443h7.172v1.924H6.92v-1.924z"/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-800 border border-green-700 hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
<svg class="w-6 h-6 text-green-400 dark:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1.75 18h-3.5A.75.75 0 019.5 17.25v-3.5H6.25a.75.75 0 01-.75-.75V9.5a.75.75 0 01.75-.75h3.5V5.25A.75.75 0 0110.25 4.5h3.5a.75.75 0 01.75.75v3.5h3.25a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.25v3.5a.75.75 0 01-.75.75z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Base cyberpunk styling for neon effects */
.neon-glow-text {
text-shadow: 0 0 5px #e11d48, 0 0 10px #e11d48, 0 0 20px #e11d48, 0 0 40px #a21238, 0 0 80px #a21238;
color: #f7d7df; /* A light pink for text color */
}
.dark .neon-glow-text-darker {
text-shadow: 0 0 5px #f43f5e, 0 0 10px #f43f5e, 0 0 20px #f43f5e, 0 0 40px #fda4af, 0 0 80px #fda4af;
color: #fce7f3; /* A lighter pink in dark mode */
}
.neon-text-hover:hover {
text-shadow: 0 0 3px #a78bfa, 0 0 6px #a78bfa, 0 0 10px #a78bfa;
color: #c4b5fd; /* Light purple on hover */
}
/* Animated glowing border */
.glow-border {
border-image-slice: 1;
border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
animation: glow-border-animation 6s infinite alternate;
}
@keyframes glow-border-animation {
0% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
25% { border-image-source: linear-gradient(to right, #ec4899, #ef4444, #8b5cf6); }
50% { border-image-source: linear-gradient(to right, #ef4444, #8b5cf6, #ec4899); }
75% { border-image-source: linear-gradient(to right, #8b5cf6, #ef4444, #ec4899); }
100% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
}
/* Pulse glow for background */
@keyframes pulse-slow {
0% { opacity: 0.2; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.02); }
100% { opacity: 0.2; transform: scale(1); }
}
.animate-pulse-slow {
animation: pulse-slow 10s infinite ease-in-out;
}
/* Button gradient and glow */
.glowing-button {
background: linear-gradient(90deg, #ec4899, #8b5cf6);
box-shadow: 0 0 10px #ec4899, 0 0 20px #8b5cf6;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.glowing-button:hover {
background: linear-gradient(90deg, #8b5cf6, #ec4899);
box-shadow: 0 0 15px #8b5cf6, 0 0 30px #ec4899;
}
/* Tab Button Styling */
.tab-button {
background: transparent;
border: 2px solid transparent;
color: #a78bfa; /* Default tab text color */
position: relative;
overflow: hidden;
}
.tab-button::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(to right, #a78bfa, #f472b6, #ef4444);
transition: all 0.3s ease-out;
transform: translateX(-50%);
}
.tab-button.active-tab-button {
color: #fff; /* Active tab text color */
text-shadow: 0 0 5px #a78bfa, 0 0 10px #a78bfa;
}
.tab-button.active-tab-button::before {
width: 100%;
}
.tab-button:not(.active-tab-button):hover::before {
width: 50%; /* Smaller underline on hover for inactive */
}
.tab-button:not(.active-tab-button):hover {
color: #d1d5db; /* Lighter text on hover for inactive */
}
/* Dark mode specific adjustments for general elements */
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-950 {
background-color: #030712 !important;
}
.dark\:bg-gray-950\/80 {
background-color: rgba(3, 7, 18, 0.8) !important;
}
.dark\:bg-gray-850 {
background-color: #1f2937 !important;
}
}
</style>
<script>
// This script is for demonstration and functional purposes of the component.
// In a real application, you would integrate with a framework or backend.
document.addEventListener('DOMContentLoaded', () => {
const loginTab = document.getElementById('login-tab');
const signupTab = document.getElementById('signup-tab');
const loginForm = document.getElementById('login-form');
const signupForm = document.getElementById('signup-form');
const formTitle = document.getElementById('form-title');
loginTab.addEventListener('click', () => {
loginTab.classList.add('active-tab-button');
signupTab.classList.remove('active-tab-button');
loginForm.classList.remove('hidden');
signupForm.classList.add('hidden');
formTitle.textContent = 'ACCESS_NEURAL_NET';
});
signupTab.addEventListener('click', () => {
signupTab.classList.add('active-tab-button');
loginTab.classList.remove('active-tab-button');
signupForm.classList.remove('hidden');
loginForm.classList.add('hidden');
formTitle.textContent = 'INITIATE_PROTOCOL';
});
});
</script>Related Components
Login/Signup Component
A responsive Login/Signup component designed for dark mode using Tailwind CSS.
Login/Signup Component
A complex login/signup component using Material Design principles and a monochromatic color scheme for business and corporate websites with dark theme support.
Login/Signup Component
A minimalist and flat design Login/Signup component with responsive effects and dark theme support, utilizing Tailwind CSS.