Password Reset Component
A complex, responsive password reset component with a monospace/developer design style, featuring a black and white color scheme with a bright accent. Designed for documentation/wiki sites, it includes dark mode support and semantic HTML.
HTML Code
<div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
<div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
<div class="flex flex-col md:flex-row">
<div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
<div>
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
<p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
<span class="text-emerald-700 dark:text-emerald-500">></span> Enter your registered email address.
</p>
<p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
<span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
</p>
</div>
<div class="mt-8 md:mt-0">
<p class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-emerald-600 dark:text-emerald-400">></span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-emerald-600 dark:text-emerald-400">></span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
</p>
</div>
</div>
<div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
<form class="space-y-6">
<div>
<label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
user@domain:~$ _
</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
placeholder="[email protected]"
class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
/>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="terms"
name="terms"
type="checkbox"
class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
/>
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
<span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
</label>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
>
<span class="">EXECUTE_RESET_COMMAND</span>
<span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
</button>
</div>
<div class="text-center">
<a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
<span class="text-emerald-600 dark:text-emerald-400"><</span> Go back to login screen
</a>
</div>
</form>
</div>
</div>
</div>
</div>
Related Components
Password Reset Component
Password Reset Component with Neumorphism style, Complementary color scheme, Complex complexity, for Social Media purpose, using Tailwind CSS. Responsive design with dark theme support.
Password Reset Component
A password reset component with Material Design, vibrant colors, moderate complexity, and e-commerce purpose. It is responsive and supports dark theme using Tailwind CSS. No JavaScript is included.
Password Reset Component
A simple password reset component designed using Material Design principles with a grayscale color scheme. It is responsive and supports dark mode.