Password Reset Component
Password Reset Component with Retro/Vintage design, Earth tones color scheme, and Complex complexity level, for Business/Corporate purpose, using Tailwind CSS. Responsive design with dark theme support. No JavaScript code needed, only HTML with Tailwind classes. Using picsum.photos for images and randomuser.me for avatars.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
>
</div>
<div class="mt-4">
<label class="block">
<a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
</label>
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
</div>
</div>
</form>
</div>
</div>Related Components
Password Reset Component
Password Reset Component with Skeuomorphism design, responsive effects and dark theme support.
Password Reset Component
A Material Design-inspired password reset component for social media platforms built with Tailwind CSS. Features a vibrant color scheme with high-saturation colors, clean layout, and responsive design with dark mode support. The component includes input fields for email, a submit button, and helpful text. The design uses material design principles like card elevation, grid layout, and depth effects.
Password Reset Component
A minimalist and flat design Password Reset Component with earth tones, responsive design, and dark theme support, tailored for blog content.