HTML 代码
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in border border-gray-200 dark:border-gray-700 relative">
<!-- Neon Box Shadow Effect -->
<div class="absolute -inset-0.5 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg blur opacity-75 animate-pulse dark:from-blue-600 dark:via-purple-700 dark:to-pink-700 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
<div class="relative p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg">
<h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-6 tracking-tight animate-fade-down">
Register for <span class="text-blue-500 dark:text-blue-400">Inspiration</span>
</h2>
<form class="space-y-5">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Full Name
</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
aria-label="Full Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Email Address
</label>
<input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
aria-label="Email Address">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Password
</label>
<input type="password" id="password" name="password" placeholder="••••••••" autocomplete="new-password" required
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
aria-label="Password">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Confirm Password
</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••" autocomplete="new-password" required
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
aria-label="Confirm Password">
</div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white
bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600
hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-700 dark:hover:to-purple-700
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400
transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
relative overflow-hidden group"
aria-label="Register Account">
Register
<!-- Small glow effect on button hover -->
<span class="absolute inset-0 w-full h-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-500 dark:to-purple-500 opacity-20"></span>
</button>
</form>
<p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
Already have an account?
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200"
aria-label="Login Link">
Sign in
</a>
</p>
</div>
</div>
</div>
<!-- To demonstrate the glow/pulse effect better, ensure these keyframe animations are present in your CSS setup (e.g., in a global CSS file or via Tailwind's JIT mode if configured) -->
<style>
@keyframes pulse {
0%, 100% {
opacity: 0.75;
}
50% {
opacity: 1;
transform: scale(1.02);
}
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-fade-in {
animation: fade-in 0.6s ease-out forwards;
}
.animate-fade-down {
animation: fade-down 0.5s ease-out forwards;
}
</style>