Search Components

Password Reset

Process for resetting forgotten passwords

Password Reset Component

A Password Reset component designed with a skeuomorphic style, using earth tones for a natural aesthetic and structured for dashboard applications. It supports dark mode and is responsive.

Open Preview

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
            <input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
        </div>
        <div class="mb-4">
            <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
        </div>
        <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
    </form>
    <div class="mt-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
    </div>
</div>

Password Reset Component Brutalism Complex Analogous Dashboard

A brutalist-style password reset component for a dashboard, featuring a complex layout, analogous color scheme, responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
  <div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
    <h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
    <p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
    <div class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
      </div>
      <div class="flex items-center">
        <input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
        <label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
      </div>
    </div>
    <button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
      Send Reset Link
    </button>
    <div class="text-center text-sm">
      <a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
    </div>
  </div>
</div>

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.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-6">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-8 space-y-6 transform transition duration-500 hover:scale-105">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Your Password</h2>
    
    <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
        <label for="email" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Email Address
        </label>
    </div>

    <div class="relative">
        <input type="password" id="new-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="new-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            New Password
        </label>
    </div>
    
    <div class="relative">
        <input type="password" id="confirm-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="confirm-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Confirm Password
        </label>
    </div>
    
    <button class="w-full py-3 bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 neumorphism-button">
        Reset Password
    </button>
  </div>
</div>

<style>
.neumorphism-button {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .neumorphism-button {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #c1c1c1;
}
.shadow-xl {
    box-shadow: 10px 10px 20px #a7a7a7, -10px -10px 20px #ffffff;
}
.dark .shadow-xl {
     box-shadow: 10px 10px 20px #4a4a4a, -10px -10px 20px #c1c1c1;
}
.shadow-inner {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner {
     box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #c1c1c1;
}
</style>

Password Reset Component

Responsive Password Reset Component with Dark Mode Support

Open Preview

                <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>

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.

Open Preview

                <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>

Password Reset Component

A minimalist and flat design Password Reset Component with earth tones, responsive design, and dark theme support, tailored for blog content.

Open Preview

                <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>

Password Reset Component

A minimalist password reset component with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Password Reset Component with Brutalism design

Password Reset Component with Brutalism design, responsive and dark theme support

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-none shadow-none border-4 border-black dark:border-white max-w-md w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center tracking-tighter">Reset Your Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-bold text-black dark:text-white mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border-4 border-black dark:border-white rounded-none bg-gray-200 dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-white" required>
      </div>
      <div class="mb-6">
        <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border-4 border-black dark:border-white rounded-none hover:bg-gray-800 dark:hover:bg-gray-200 transition duration-0 ease-linear">Send Reset Link</button>
      </div>
    </form>
    <div class="text-center">
      <p class="text-sm">
        <a href="#" class="text-black dark:text-white hover:underline font-bold">Remember your password?</a>
      </p>
    </div>
  </div>
</div>

Password Reset Component

Password Reset Component with Skeuomorphism design, responsive effects and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">New Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Confirm your new password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-pressed dark:shadow-neumorphic-pressed-dark">
          Reset Password
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #2d3748;
  }

  .shadow-inner-neumorphic {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }

    .shadow-neumorphic-pressed {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }
</style>

Password Reset Component

A responsive password reset component with Neumorphism design, dark mode support, and no JavaScript.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
        Reset Password
      </button>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
  }
  .shadow-neumorphic-input {
    box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  }
  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
  }
  .shadow-neumorphic-button {
    box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
  }
    .dark .shadow-neumorphic-button-dark {
    box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
  }
</style>

Search Components

Categories

Password Reset