Password Reset Component
A minimalist and flat design Password Reset Component with earth tones, responsive design, and dark theme support, tailored for blog content.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
</div>
<button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
</form>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
</div>
</div>
</div>
Related Components
Password Reset Component with Brutalism design
Password Reset Component with Brutalism design, responsive and dark theme support
Password Reset Component
A minimalist password reset component with responsive design and dark theme support using Tailwind CSS.
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.