HTML 代码
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 transition-colors duration-300">
<div class="w-full max-w-md p-8 rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-700 bg-gray-200
dark:border dark:border-gray-600
[box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6 text-center">Register Account</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Username field">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Email field">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Password</label>
<input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Password field">
</div>
<button type="submit" class="w-full p-3 rounded-lg font-semibold text-white
bg-blue-500 hover:bg-blue-600 active:bg-blue-700
shadow-md hover:shadow-lg dark:shadow-md dark:hover:shadow-lg
[box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2
dark:focus:ring-offset-gray-700 transition-all duration-200"
aria-label="Register button">
Register
</button>
<p class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium" aria-label="Login link">Login here</a>
</p>
</form>
</div>
</div>