HTML 代码
<div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-zinc-900 border-4 border-solid border-black dark:border-lime-500">
<div class="w-full max-w-md bg-lime-400 dark:bg-zinc-800 p-8 pt-6 rounded-none shadow-brutalist border-8 border-black dark:border-lime-500 animate-fade-in">
<h2 class="text-4xl sm:text-5xl font-black text-black dark:text-lime-400 mb-6 uppercase tracking-extra-wide leading-tight border-b-8 border-black dark:border-lime-500 pb-2">
INITIATE LOGIN
</h2>
<form class="space-y-6">
<div>
<label for="email" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">ACCESS CODE:</label>
<input
type="email"
id="email"
class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
placeholder="ENTER EMAIL PROTOCOL"
required
/>
</div>
<div>
<label for="password" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">SECURE PHRASE:</label>
<input
type="password"
id="password"
class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
placeholder="ENCRYPTED PASSCODE"
required
/>
</div>
<button
type="submit"
class="w-full py-4 text-xl font-extrabold bg-lime-600 dark:bg-lime-500 text-black dark:text-zinc-900 uppercase border-8 border-black dark:border-lime-500 hover:bg-lime-700 dark:hover:bg-lime-600 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-800 active:bg-lime-800 dark:active:bg-lime-700 transition-all duration-150 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-brutalist-button"
>
INITIATE <span class="hidden sm:inline-block">DIRECTIVE</span>
</button>
<p class="text-sm text-black dark:text-lime-200 text-center font-mono">
<a href="#" class="underline text-black dark:text-lime-300 hover:text-black dark:hover:text-lime-400 transition-colors duration-200">
FORGOTTEN SECURE PHRASE? <span class="hidden sm:inline-block">RETRIEVE</span>
</a>
</p>
</form>
</div>
</div>
<style>
/* Custom properties for brutalist shadow effects */
.shadow-brutalist {
box-shadow: 16px 16px 0px 0px black;
}
.dark .shadow-brutalist {
box-shadow: 16px 16px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
}
.shadow-brutalist-button {
box-shadow: 8px 8px 0px 0px black;
}
.dark .shadow-brutalist-button {
box-shadow: 8px 8px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
}
.tracking-extra-wide {
letter-spacing: 0.15em;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
</style>