Components Password Reset Password Reset Component

Password Reset Component

Responsive Password Reset Component with Dark Mode Support

Preview

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500">
      </div>
      <div>
        <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">Send Reset Link</button>
      </div>
    </form>
  </div>
</div>

Related Components

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.

Open

Password Reset Component

A responsive password reset component with a dark mode UI, using an analogous color scheme. Designed for e-commerce applications.

Open

Skeuomorphic Pastel Password Reset

A responsive Password Reset web component designed with a Skeuomorphism aesthetic, featuring soft pastel colors. The interface is complex, with multiple interactive elements detailed through 3D effects, shadows, and subtle textures created with Tailwind CSS. It includes a form for email input and a prominent 'Send Reset Link' button, along with secondary links. Dark theme is supported. Ideal for portfolio showcases.

Open